wordbreak:breakall和wordwrap:breakword的区别

了解word-break属性

/* 关键字值 */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;

/* 全局值 */
word-break: inherit;
word-break: initial;
word-break: unset; 
normal
使用默认的换行规则。
break-all
允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。
keep-all
不允许CJK(Chinese/Japanese/Korean)文本中的单词换行,只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。

其中,break-all这个值所有浏览器都支持。但是keep-all就不这样了,虽然有一定的发展和进步 – Chrome44正式支持了,但是,iOS下的Safari8/9都还不支持(下表黄绿色的表示不支持keep-all)。换句话说,基本上现在移动端还不适合使用word-break:keep-all.

了解word-wrap属性

/* 关键字值 */
word-wrap: normal;
word-wrap: break-word;

/* 全局值 */
word-wrap: inherit;
word-wrap: initial;
word-wrap: unset;

  

几个关键字值的含义如下:

normal
就是大家平常见得最多的正常的换行规则。
break-word
一行单词中实在没有其他靠谱的换行点的时候换行。
word-break:break-all正如其名字,所有的都换行。毫不留情,一点空隙都不放过。而word-wrap:break-word则带有怜悯之心,如果这一行文字有可以换行的点,如空格,或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的,则就不打英文单词或字符的主意了,让这些换行点换行,至于对不对齐,好不好看,则不关心。
word-spacing是单词之间间距的,white-space是字符是否换行显示的。
原文地址:https://www.cnblogs.com/zsy0712/p/4984279.html