知识点
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的区别
- 首先来看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则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。"
解决方案
- 统一不换行，溢出则用省略号表示，css代码如下
.ellipsis{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;/*必须和overflow:hidden,连用才有效*/
}
- 自动换行+长单词内部换行，外层框自动承开。要求父级元素都没有高度限制。
{
word-break：break-all;
}
