如何优雅的限制文字显示
<!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. 溢出的部分用省略号替代 */
当然得是在限制了宽高这一类情况使用是最为合理的