1.换行奥秘之word-break:break-all和word-wrap:break-word的区别

261 阅读1分钟

一,了解word-break属性

MDN上展示的语法为: image.png

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

  1. normal 使用默认的换行规则。 image.png image.png

  2. break-all 允许任意非CJK(Chinese/Japanse/Korean) 文本间的单词断行。 image.png image.png

  3. keep-all 不允许CJK(Chinese/Japanse/Korean)文本中的单词换行,只能在半角空格或连字符处换行。非CJK文本中的行为实际上和normal一致。

image.png image.png

二,了解word-wrap属性

MDN上展示的语法为: image.png

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

  1. normal 就是大家平常见得最多的正常的换行规则。
  2. break-word 一行单词中实在没有其他靠谱的换行点的时候换行。

word-wrap属性由于和word-break长得太像,容易被人搞混淆。所以在CSS3规范中,把这个属性名称改为overflow-wrap,这个新的属性名更容易被人区别记忆。

三,回归重点,word-break:break-all和word-wrap:break-word的区别

image.png 会发现类似下图的效果:

image.png

可以发现,word-break:break-all正如其名字,所有的都换行。毫不留情,一点空隙都不放过。而word-wrap:break-word则带有怜悯之心,如果这一行文字有可以换行的点,如空格,或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的,就不会在英文单词或字符处换行,让换行点换行,至于对不对齐,样式美不美观就不考虑了,因此会出现一大片空白的情况。