第 54 期(W3C标准-CSS-布局排版)：word-break与word-wrap

[wingmeng]

word-break 与 word-wrap 这两个 CSS 属性非常拗口，经常让人傻傻分不清，它们都跟控制单词内断句的行为有关，只和拉丁语系文字有关。

假设我们有如下代码：

.box {
  width: 120px;
  border: 1px solid red;
}

<div class="box">This paragraph contains a verrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrry long word.</div>

不出意外的话，它的表现应该是这样子的：

可以看到那个很长的单词溢出了，通常情况下我们希望它能自动换行，这种场景就需要用到 word-break 与 word-wrap 了。

word-wrap: 用来标明是否允许在单词内进行断句换行，它有2个值：

• normal 默认值。当遇到一个当前行放不下的单词时，允许换行，如果换行后还是超过一行，那就溢出显示。
• break-all 当遇到一个当前行放不下的单词时，允许换行，如果换行后还是放不下，继续换行，直到整个单词结束。

word-break: 用来标明怎么样进行单词内的断句，它有2个值：

• break-all 霸道型。强行上，挤不下的话剩余的换下一行，直到整个单词都摆放进来。
• keep-all 傲骄型。放不下，我就另起一行，还放不下，我也不退缩。