文本换行和超出限制显示省略号

一、文本换行
文本超出长度时，自动换行。

white-space: normal; 
word-break: break-all;
overflow: hidden;

二、单行文本和多行文本的省略号
单行文本溢出显示省略号使用text-overflow:ellipsis属性，需要加宽度width属性来兼容部分浏览。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本

display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 指定显示行数 */
overflow: hidden;
text-overflow: ellipsis; /* 超出部分以省略号形式显示 */

适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端。
注意：
-webkit-line-clamp属性可以限制块容器中的内容为指定行数。
需要组合其他属性才有效果。必须结合的属性：

display: -webkit-box/-webkit-inline-box;  
-webkit-box-orient: vertical; 

white-space属性指定元素内的空白怎样处理。
word-break属性指定了怎样在单词内断行。

参考：
-webkit-line-clamp MDN