多行文字 超出显示省略号

图1

图2

控制只显示一行，超出用省略号替代，可以下面样式解决：

word-break: keep-all;
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