常用CSS样式总结 -- 文字内容换行问题 / 单行文字超出省略显示 / 多行文字超出省略显示

1. 自动换行（强制换行）：word-break:break-all;

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

2. 根据换行点换行：word-wrap:break-word;

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

3. word-break:break-all和word-wrap:break-word的区别

一张图说明：

更详细的戳：word-break:break-all和word-wrap:break-word的区别

4. 单行文字超出显示省略号

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

4.1 white-space：设置如何处理元素内的空白

使文字不换行：white-space: nowrap;

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值（所有的IE浏览器都不支持此属性）。

4.2 text-overflow:规定当 “文本” 溢出包含元素时发生的事情

显示省略号：text-overflow: ellipsis;

值	描述
clip	默认。修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

4.3 overflow:规定当 “内容” 溢出元素框时发生的事情

裁剪内容并使其不可见：overflow: hidden;

值	描述
visible	默认。内容不会被裁剪，会显示在元素框之外。
hidden	内容会被裁剪，并且其余部分是不可见的。
scroll	内容会被裁剪，但浏览器会显示滚动条以便查看其余内容（有人认为鸡肋，从来没有使用过）。
auto	如果内容被裁剪，则浏览器会显示滚动条以便查看其余内容。
inherit	规定应该从父元素继承overflow属性的值。

5. 多行文字超出显示省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

相关链接：
关于-webkit-line-clamp
关于-webkit-box
关于-webkit-box-orient