css的文本换行之word-wrap

用途

避免文本溢出容器

属性

normal（浏览器默认表现）

剩余位置无法容纳当前单词时：

• 如果是开头，单词将溢出容器。
  
• 如果非开头，将单词放到下一行，如果下一行仍然放不下，单词将溢出容器。
  

anywhere

当前行剩余位置无法容纳当前单词时：

• 如果是开头，打断单词。
  
• 如果非开头，将单词放到下一行，如果下一行仍然放不下，则打断单词。
  

break-word

当前行剩余位置无法容纳当前单词时：

• 如果是开头，打断单词。
  
• 如果非开头，将单词放到下一行，如果下一行仍然放不下，则打断单词。
  

你没有看错，anywhere和break-word的表现是一样的。

应用场景

url、长单词、用户输入的非预期内容

使用前：
normal

使用后：
anywhere

break-word

注意事项

anywhere和break-wrod的差异

当容器的width值为非min-content时，采用anywhere或break-word是没有差异的。当容器的width值为min-content时，两者才存在差异。

当容器为word-wrap: anywhere时，width的min-content被解释为容器中字母或数字的宽度。如下图，红色边框容器的宽度自动变成了一个字母的宽度。

当容器为word-wrap: break-word时，width的min-content被解释为容器中最长单词的宽度。如下图，红色边框容器的宽度自动变成了一个单词的宽度。

也就是word-wrap的取值，会影响到width的min-content实际值，不过目前还没有想到min-content在什么情况下会用到，所以，这个差异心里有数就行了。

word-wrap的别名

word-wrap的官方名是overflow-wrap。