文字超出省略号表示的几种方法
这是经常会用到的样式
单行:
必须要设置文本高度
.text{ width:100%; height:30px; line-height:30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
多行:
.text{ width: 100%; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2; /*设置行数*/ display:-webkit-box; /*这行是关键,虽然不知道是什么意思*/ }
方法好用,但不兼容IE,因为webkit是css的扩展属性,只适用于移动端和webkit浏览器。
辣么,要兼容IE怎么办呢,方法总是有的,我们的css还有伪类这一说,兼容性好,但缺点也有,就是文字不会超出的时候也会有省略号。
.text{ position: relative; line-height: 32px; max-height: 32px; overflow: hidden; } .text:after{ content: "..."; position: absolute; bottom: 0; right: 0; }