css强制换行、禁止换行、超出两行或三行显示省略号...

强制换行

word-break: break-all;
/*只对英文起作用，以字母作为换行依据。
如果该行末端有个很长的英文单词，它会把单词截断，一部分保持在行尾，另一部分换到下一行。*/

word-wrap: break-word;
/*只对英文起作用，以单词作为换行依据。
如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉。*/

white-space: pre-wrap;
/*只对中文起作用，强制换行。*/

禁止换行(单行文本截断)

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/*
white-space: nowrap; // 溢出不换行
overflow: hidden; // 超出的文本隐藏
text-overflow: ellipsis; // 溢出用省略号显示
*/

多行文本截断(超过两行或三行用省略号…表示)

-webkit-line-clamp 实现

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*行数*/
/*
-webkit-line-clamp需要和 display、-webkit-box-orient 和 overflow 结合使用：

display: -webkit-box;  //必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //必须结合的属性，设置伸缩盒子的子元素排列方式，vertical是从上到下排列
-webkit-line-clamp: 3;（行数）//不是css的规范属性，需要组合上面两个属性使用
text-overflow: ellipsis; //可选属性，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。
*/

说明：-webkit-line-clamp 是一个不规范的属性，它没有出现在 CSS 规范草案中。也就是说只有 webkit 内核的浏览器才支持这个属性，像 Firefox, IE 浏览器统统都不支持这个属性