CSS换行和分词逻辑

Question

我读了很多书，但我似乎不能理解word-wrap: break-word和word-break: break-word之间的区别(注意:我不使用CJK语言，所以在这方面的区别对我来说无关紧要)。

实际上，我可以看到它们的行为方式不同:考虑到它的祖先的宽度，如果有必要，word-break会在单词中间中断。另一方面，word-wrap只关心它自己的宽度。如果元素的宽度超过其父元素的宽度，它将不会中断。这对我来说似乎很奇怪。这真的是两者之间的区别吗？

请参阅此处的示例：

word-break工作：https://jsfiddle.net/hh6a03cy/7/

https://jsfiddle.net/hh6a03cy/6/：word-wrap不起作用

<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断字符没有"break-word“值，它是由Chrome创建的。

您的word-wrap不能工作的原因是您没有设置div.Here的宽度，它是代码https://jsfiddle.net/hh6a03cy/8/的工作版本