图1
图2
控制只显示一行,超出用省略号替代,可以下面样式解决:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
多行文字显示文字时,要想限制行数,超出的用省略号显示,可以下列样式解决:
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
一般情况下,上面的两种解决方案是有效的。但是如果你把文字放在a标签里,就会产生图2的bug,省略号居然在行间,而不是在行末,这时可以在a标签里嵌套多一层,再把字放进去,再在这一层里写样式。就可以解决这个bug啦!如图3
图3