CSS word-break

一、CSS word-break的作用

CSS word-break属性定义了在哪个点断开连续的字符定义。该属性可用于中文、日文和韩文等语言，同时也适用于其他语言如英语、法语等。

word-break 有两种常用的属性值。

.word-breek{
  word-break: break-all;
  word-break: keep-all;
}

break-all：表示允许字符串在单词内断开，在字符之后断开，默认情况下，文本断行规则在两端是不允许断词的；

keep-all：表示不允许字符串在单词中间断开。只有在东亚的语言（CJK，即中文，日文，韩文）中使用这个值是有意义的。

二、word-break和中文排版的问题

在使用CSS排版中文的时候，我们通常会遇到以下问题：

中文字符长度比英文字符长度长，一个中文字符通常有2个英文字符那么长；微软雅黑等中文字体通常比博客英文字体长。这就导致了如果不特殊处理，排版结果就会出现中英混排的时候，出现一些难看、顿挫不流畅的字符间隔。

在这种情况下，word-break属性就派上了用场。如果将word-break属性设置为break-all，那么在遇到中文字符之处，就会将整个字符单独放一行显示，从而解决了中英混排出现字符难看的问题。

.demo{
  word-break: break-all;
}

三、其他用途

除了上述情况，word-break在其他方面也有许多用途。比如：

适用于单词过长，溢出父容器，建议使用hyphens和word-break,之前我们学习了hyphens就是为了处理在中英文字混杂的文本中，单词太长导致的单词会溢出父容器的问题了，但是hyphens有一些局限性，word-break就能起到完美解决。在设置word-break为break-all的情况下，长单词将被平均拆分，以适应带有最小高度的容器。

.demo{
  width: 200px;
  word-break: break-all;
}

在英语、法语等语言中，我们知道连字符（-）常被用于单词的分隔符。但是在中文、日语、韩语等语言中，连字符并不是常见的分隔符，那么不加断行会导致词距与句子较大，使用 word-break 包括 break-all 和 keep-all 都可帮助实现连字正常排布。

.demo{
  width: 200px;
  word-break: break-all;
  text-align: justify;
  text-align-last: justify;
}

四、Word-break的兼容性

word-break为CSS3属性，IE6-11和Safari 9以下的版本都不支持word-break: break-all

需要注意的是，在苹果操作系统中，如果有OSX用户自定义的等宽中文编码存在，word-break: keep-all;将会失效且不能包装空白。