如何優雅的限制文字顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 30px;
}
li {
resize: none; /*防止拖拽*/
list-style: none;
width: 200px;
height: 30px;
border: 1px solid pink;
white-space: nowrap;
/*1.強制在同一行內顯示所有文本，直到文本結束或者遭遇br標籤對象才換行*/
overflow: hidden; /* 2. 超出的部分 隱藏 */
text-overflow: ellipsis; /* 3. 溢出的部分用省略號替代 */
line-height: 30px;
}
span{
display: block;
width:200px;
border: 1px solid pink;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li>文字內容文字內容文字內容文字內容文字內容</li>
<li>文字內容文字內容文字內容文字內容文字內容</li>
<span>其實寫多少都無所謂，我只能看到這麼多，就這麼多,反正不可以再多了</span>
</ul>
</body>
</html>
這種樣式效果很簡單，關鍵的樣式主要有
white-space: nowrap;/*1.強制在同一行內顯示所有文本，直到文本結束或者遭遇br標籤對象才換行*/
overflow: hidden; /* 2. 超出的部分 隱藏 */
text-overflow: ellipsis; /* 3. 溢出的部分用省略號替代 */
當然得是在限制了寬高這一類情況使用是最爲合理的