CSS

文本溢出

• word-break 自动换行

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

• white-space 设置或检索对象内文本显示方式,通常用于强制一行显示。

normal 默认。空白会被浏览器忽略。
nowrap  文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

• text-overflow 文字溢出的处理方式

text-overflow: clip|ellipsis|string;
clip    修剪文本。
ellipsis    显示省略符号来代表被修剪的文本。
string  使用给定的字符串来代表被修剪的文本。

• 文字超出一行，省略超出部分，显示’…’

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

• 可以给定容器宽度限制，超出部分省略

max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

• 文字超过两行或三行就显示省略号

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

• 默认属性是不会显示