Question

我已经阅读了很多内容，但我似乎无法理解word-wrap: break-word和word-break: break-word之间的区别（注意：我不会使用CJK语言，所以差异在这方面与我无关。）

实际上，我可以看到他们采取行动的方式存在差异：word-break考虑到其祖先的宽度，如果必须，会在单词中间打破。另一方面，word-wrap只关心自己的宽度。如果元素的宽度超过其父宽度，它将不会中断。这对我来说很奇怪。这真的是两者之间的区别吗？

请参见此处的示例：

word-break有效：https://jsfiddle.net/hh6a03cy/7/

word-wrap无效：https://jsfiddle.net/hh6a03cy/6/

<div style="display: flex; font-size: xx-large;">
  <span>woohoo</span>
  <div style="word-break: break-word; vertical-align: top">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
  </div>
</div>

相关问题：CSS - inline blocks side by side with 100% width

我想真正理解word-wrap和word-break的工作原理（尤其是word-wrap），但我似乎无法在任何地方找到答案。

谢谢

Answer 1

正如您在此处所看到的那样：https://developer.mozilla.org/en-US/docs/Web/CSS/word-break此处https://www.w3schools.com/cssref/css3_pr_word-break.asp字干没有＆＃34;破解字＆＃34;价值，它是由Chrome创建的。

你的word-wrap无效的原因是因为你还没有设置div的宽度。这是你的代码https://jsfiddle.net/hh6a03cy/8/的工作版本，带有自动换行

CSS - 自动换行和分词逻辑

1 个答案: