word-wrap,word-break,white-space强制换行和不换行总结

扬舲

css

发布于：2017年5月15日

我们一般控制换行所用到的 CSS 属性一共有三个：word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的

word-wrap 语法：

word-wrap: normal(默认) | break-word

normal: 允许内容顶开指定的容器边界
break-word: 内容将在边界内换行。必要时会触发 word-break

说明
word-wrap 是控制是否“为词断行”的，设置或检索当前行超过指定容器的边界时是否断开转行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。

范例
congratulation 这个单词属于长串英文，word-wrap:break-word 整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断，这就是对于长串文字不起作用的解释。word-wrap:normal 是默认情况，英文单词不被拆开。

结论
作用范围仅为 div 这类标准块级元素，th,td 这类 table 元素虽然识别但是没有效果（如果为 td,th 加上宽度 word-wrap 在 IE 下是能够发挥效果的，但根据完全兼容性方便记忆角度上来说还是以前面的结论为准）。

word-break

word-break: normal(默认) | break-all | keep-all

normal: 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
break-all: 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
keep-all: 与所有非亚洲语言的 normal 相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。

说明
word-break:break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题（恰恰弥补了上面 word-wrap:break-word 对于长串文字不起作用的缺陷）

范例
继续以上面 congratulation 这个单词属于长串英文，word-break:break-all 它会把单词截断，该行末端就会变成类似 conra(congratulation 的前端部分)，下一行为 tulation（conguatulation）的后端部分了。
word-break:keep-all，是指 Chinese, Japanese, and Korean 不断词。即只用此时，不用 word-wrap，中文就不会换行了。（英文语句正常。）

结论
作用范围仅为 div 这类标准块级元素，th,td 这类 table 元素虽然识别但是没有效果（经测试 Chrome 下 word-break:break-all 是有效果的，但根据完全兼容性方便记忆角度上来说还是以前面的结论为准）。Firefox,Opera 是无法识别 word-break 的，更不用提 Firefox 下的 th,td 中使用 word-break 的效果了。

white-space

white-space: normal(默认) | pre | nowrap

normal: 默认。空白会被浏览器忽略。
pre: 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签
nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。

说明

对于 pre 属性，其实就是 HTML 中连续的多个空白符会被合并，然后为了不让他合并（最常用的场合就是表示代码文字缩进）让其中的空白符继续保留而不需要我们增加额外的样式和标签来控制它的缩进和换行。pre 标签的原理也是一样的内部默认有了个 white-space:pre。
对于 nowrap 属性，这个是强制不换行核心，一般强制不换行就是利用这个属性。Firefox 的 div 和 td 中，以及 IE 的 div 中，均没有问题。唯一的瑕疵就是在 IE 的 td 中会有一个问题，如果 td 没有指定宽度，则 nowrap 仍然有效，如果 td 有宽度，并且文字中无标点、无空格（例如中文长串文字），nowrap 则不再有效。解决方式就是可以加 word-break:keep-all;可以解决此问题。

总结强制换行

div（块级元素）
- word-wrap:break-word; word-break:break-all;
td,th 这类 table 元素
- 先为 table 设定 table-layout:fixed，基本上设定完这个属性后基本的换行问题都能够解决而不会出现 table 中 td,th 因为里面各个内容的多寡发生抢夺其他 td,th 宽度的情形发生。这时如果你依旧有强制换行问题，那么在此 td 中内部加一层 div，那么情况就会像上面讨论的方式来解决。