一、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;将会失效且不能包装空白。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/286548.html
微信扫一扫 
支付宝扫一扫 