这个效果,不兼容IE,不过还是很好用。
.one-line {
width: 100px;
overflow: hidden; /把超出1行的内容隐藏/
white-space: nowrap; /不换行/
text-overflow: ellipsis; /用省略号填充尾部/
}
/超出2行用省略号显示/
.two-lines {
overflow: hidden; /把超出N行的内容隐藏/
text-overflow: ellipsis; /用省略号填充尾部/
display: -webkit-box; /设置容器显示为webkit盒子/
-webkit-line-clamp: 2; /指定行数/
-webkit-box-orient: vertical; /设置盒子内文字显示方向/
}
本文介绍了一种使用CSS实现文本溢出时自动显示省略号的方法,包括单行和多行文本的处理技巧。该方法通过设置特定的CSS属性如white-space, overflow, 和text-overflow来达到效果,但需注意不兼容IE浏览器。
652

被折叠的 条评论
为什么被折叠?



