单行文本
先来简单说一下单行文本超出显示省略号的方法,大家基本都会了:
Element {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
含义什么的在此就不额外赘述了
多行文本
Element {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
但是这种方法有一个缺点, 它只能兼容谷歌内核的浏览器, 对于 **火狐/ie/欧朋** 等浏览器就行不通了
所以需要另一种方法来处理多浏览器的兼容问题
Element {
position: relative;
line-height: 24px;
height: 72px;
overflow:hidden;
}
Element:after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
}
- 将height设置为line-height的整数倍,防止超出的文字露出
- 如果需要用ie7及以下版本的浏览器需要更换 after 伪类,因为ie7及以下版本的浏览器不显示 content 中的内容