实现溢出时产生省略号的效果
text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)以及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下:
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
上面的方法有一个缺陷就是:只能显示一行文本,当要实现显示2行或者3行…文本,然后多余的行在显示省略号的情况下,使用如下代码:
自定义在第3行添加省略标志(关键是-webkit-line-clamp):
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;