[css]处理文字溢出的方案

知识点

white-space、word-break、word-wrap

浏览器默认的换行规则

.default{
  white-space:normal;
  word-wrap:normal;
  word-break:normal;
}

默认情况下：
因为white-space:normal是默认值，css规范中要求会自动换行。HTML中文字长度如果超出外层边框是会自动换行的。
如果遇到一个长单词。浏览器会先尝试将长单词放在本行，如果文字超出了，那么会自动换到下一行。如果换行之后仍然超出，那就只能溢出了。

word-wrap与word-break的区别

1. 首先来看word-break
   word-break 属性规定自动换行的处理方法。

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

2.再来看看word-wrap
word-wrap 属性允许长单词或 URL 地址换行到下一行。

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

相同点

都与单词内换行有关系。事实上，word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句。

不同点

"不同点是word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。"

解决方案

1. 统一不换行，溢出则用省略号表示，css代码如下

.ellipsis{  
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;/*必须和overflow:hidden,连用才有效*/
}

2. 自动换行+长单词内部换行，外层框自动承开。要求父级元素都没有高度限制。

{
word-break：break-all;
}

参考文献

1. 你真的了解word-wrap和word-break的区别吗？
2. 多行文本溢出显示省略号(…)全攻略