平时在开发时,经常会有要求让文字单行或多行显示,多余的文字用省略号代替的需求。
文本单行显示很好解决,用如下的 CSS 属性就行了:
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
那么多行文本的要怎么处理呢,针对多行文本,有二种处理方式,首先就是对于 webkit 内核的浏览器,处理起来比较简单,使用如下 CSS 属性:
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 2; /*要显示的行数*/
-webkit-box-orient: vertical;
以上的属性在 webkit 内核的浏览器里面是没有问题的,不需要做多余处理,所以做移动端 H5 开发的就比较舒服了。
如果不是在 webkit 内核的话,上面的属性就不行了,需要使用另外的方法。就是利用相对定位在最后面加上一个省略号了,代码可以参考下面:
p {
position:relative;
line-height:1.5em;
/* 高度为需要显示的行数*行高,比如这里我们显示两行,则为3 */
height:3em;
overflow:hidden;
}
p:after {
content:"...";
position:absolute;
bottom:0;
right:0;
padding: 0 5px;
background-color: #fff;
}
不过这样会有一点问题:
- 需要知道显示的行数并设置行高才行;
- IE6/7不支持after和content,需要添加一个标签来代替;
- 省略号的背景颜色跟文本背景颜色一样,并且可能会遮住部分文字,建议可以使用渐变的png背景图片代替。
在用上面的二种方法处理的时候,还需要特别注意的一个问题就是,**承载文字的容器不要有 padding-bottom 属性,当设置了 padding-bottom 又同时设置文本多行显示的话,就会发现多行显示的没有效果了,**这一点在其他讲这个问题的文章中基本都没见到有说过,但是如果不注意的话会导致设置的属性没起作用,进而会浪费很多时间去排查问题。所以请务必注意。
以上就是我总结的用 CSS 实现文本单行或多行显示的解决方法。
参考文章: http://lomu.me/post/css-multiline-text-overflow