Open
Description
单行文字的省略
<style>
.test {
width: 100px;
border: 1px solid red;
white-space: nowrap; /* 文本内的换行无效 */
overflow: hidden; /* 溢出部分隐藏 */
text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
}
</style>
<body>
<div class="test">爱的发放到更加了解嘎多凉快加大科技嘎考虑过价格地方建安费教大家覅OA二级发挥地方好</div>
</body>
效果如下
多行文字的省略
<style>
.test {
width: 100px;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /* 必须结合的属性，将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 指定一个box子元素是否应按水平或垂直排列 */
-webkit-line-clamp: 2; /* 把内容限制为指定的行数，只有在 display 属性设置成 -webkit-box才有效 */
}
</style>
<body>
<div class="test">爱的发放到更加了解嘎多凉快加大科技嘎考虑过价格地方建安费教大家覅OA二级发挥地方好</div>
</body>
效果如下
这个省略的效果也可以用js来做：
function subEllipsis(content) {
content = content.length>24 ? content.substring(0,23)+'...' : content
}
js的做法适用于最多适配多少个字符的情况，但是如果想控制显示几行的话，css的方式显然更加方便