css中word-break、word-wrap和white-space的区别

css中word-break、word-wrap和white-space的区别 ：https://baijiahao.baidu.com/s?id=1578623236521030997&wfr=spider&for=pc

 

在页面中遇到文本需要折行显示时，总会困惑word-break、word-wrap和white-space到底应该用哪个？三者之间又有什么区别？今天查阅资料总结了一下。

首先是white-space。它主要是用来处理元素内文本的空白符、换行符以及是否允许折行。可选值包括normal（默认）、pre、nowrap、pre-wrap、pre-line。用法如下：

whitie-space用法

其中，上图说明1中的CJK指的是中文、日文、韩文三国文字的缩写（应该包含多种亚洲文字），默认情况下，CJK文本自动换行，非CJK文本由word-wrap和word-break决定。举例如下：

再看word-wrap与word-break。word-wrap是用来标明是否允许浏览器在单词内进行断句，为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。word-break用来标明怎样进行单词内的断句。

word-wrap默认值normal，可选值break-word。

word-break默认值normal，可选值为break-all，keep-all。非CJK文本下，keep-all和normal的表现是一致的。

具体看例子( 文本为英文时 )：

上面的情况是在不加word-wrap或word-break的时候，即浏览器默认的时候，如果有一个单词很长，导致一行中剩下的空间已经放不下它时，则浏览器会把这个单词挪到下一行去。而当这个长单词特别长，一行也放不下，即它的长度超过包裹它的元素的长度时，它就会溢出它的容器。

现在给这段文字加上word-wrap:break-word。效果如下：

添加word-wrap:break-word

使用word-wrap:break-word后单词被截断了。但是，可以看到，文本的第一行留有很多空白，如果不想留有这么多空白怎么办？这时word-break就派上用场了，现在给这段文字加上word-break:break-all。效果如下：

从上面的图可以看出，使用word-wrap时，它会首先尝试将长单词挪到下一行，再看看下一行的宽度够不够，不够的话就进行单词内的断句。而word-break不会尝试把长单词挪到下一行，而是直接进行单词内的断句。

word-break中除了break-all，还有keep-all。keep-all只能在半角空格或连字符处换行。举例如下：

非CJK文本下，keep-all和normal的表现是一致的。举例如下：

总结（个人实际使用时）：

white-space主要用来设置CJK文本是否不折行，实际中主要用white-space:nowrap来让文本不折行。

word-wrap主要用来设置非CJK文本是否折行（因为CJK文本会自动折行），如果空间足够，不会对单词内部进行截断

word-break同样主要用来设置非CJK文本是否折行，但是会对单词内部进行截断

欢迎留言交流。