为什么“word-break”有效，而“word-wrap”无效？答案

【问题标题】：Why does "word-break" work, but "word-wrap" does not work?为什么“word-break”有效，而“word-wrap”无效？
【发布时间】：2018-11-28 12:43:32
【问题描述】：

我使用 flexbox 进行了简单的布局。

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
}

<div class="wrap">
  <div class="left">hello!</div>
  <div class="right">world!</div>
</div>

如果弹性项目有长文本，则此布局会溢出弹性容器。

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  border: 3px solid red;
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
}

<div class="wrap">
  <div class="left">hello!</div>
  <div class="right">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>
</div>

所以我使用了overflow-wrap 属性。但它没有用。

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  border: 3px solid red;
  overflow-wrap: break-word; /* add */
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
}

<div class="wrap">
  <div class="left">hello!</div>
  <div class="right">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>
</div>

奇怪的是，与“overflow-wrap”具有相同作用的“word-break”工作正常。（"word-break: break-word;" 不适用于 Firefox，但适用于 Chrome）

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  border: 3px solid red;
  word-break: break-word; /* add */
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
}

<div class="wrap">
  <div class="left">hello!</div>
  <div class="right">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>
</div>

“word-break”和“word-wrap”有什么区别？从 W3C 文档中，我们找不到与上述行为相关的任何差异。

我阅读了 CSS Text Module Level 3 的两个部分。

【问题讨论】：

这一定是你感兴趣的：stackoverflow.com/questions/1795109/…
@Daut > "overflow-wrap: break-word" 是为了防止溢出，如果行中没有其他可接受的断点，通常不可破坏的单词可能会在任意点被破坏。（source）所以，如果你设置“overflow-wrap:break-word”，“world！World！World！”还有“世界！世界！世界！”应该折回去。
我认为问题可能在于 flex 允许孩子在内容太大时溢出，因此单词 break 不会出现
@Takilsy > 感谢您提供良好的链接！有一些有用的答案，但没有一个提到规范。如果可能的话，我想阅读和理解规范。
@pete > 我是这么认为的。但是，由于“word-break”和“word-wrap”的结果不同，两者之间可能存在一些不同。

标签： css flexbox

【解决方案1】：

它们非常相似。一个问题是word-break: break-word 仍处于试验阶段，可能会导致问题。

但这里的问题是display:flex，因为为了让overflow-wrap: break-word 工作，它需要应用在一个元素上

具有可视化渲染，是具有显式的内联元素高度/宽度，绝对定位和/或是块元素。

例如，将宽度添加到 right 而不是 left 会导致这种差异。两者都有overflow-wrap: break-word，但只有一个具有特定宽度。

当word-break 和overflow-wrap 都将break-word 作为值时，这是我能想到的唯一区别。

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  border: 3px solid red;
  overflow-wrap:break-word;
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
  width:50%;
}

<div class="wrap">
  <div class="left">aaa wordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordw bbb!</div>
  <div class="right">aaa wordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordwordword bbb</div>
</div>

【讨论】：

非常感谢您提供有趣的信息。当然，有些人会说“具有可视化渲染，是具有明确高度/宽度的内联元素，绝对定位和/或是块元素”。但是，它没有写在规范中（CSS Text Module Level 3）。这是由于浏览器的实现吗？或者这写在规范的某个地方？
我在规范中的任何地方都没有看到它，但我猜wrap 这个词意味着该属性必须知道在哪里包装（内容框的边框），这就是它起作用的原因具有特定宽度的元素。很抱歉，我无法提供有关此的更多信息..

【解决方案2】：

正如您已经注意到的那样，两者的行为应该相同，并且问题与 flexbox 有关。如果我们使用没有 flexbox 的布局，两者都会给出相同的结果：

.right {
  background: green;
  margin:10px;
}

<div class="right" style="word-break: break-word;">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>

<div class="right" style="overflow-wrap: break-word;">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>

我不知道为什么，但它似乎与the min-width setting of flexbox 有关。它可能是一个错误或其他使这两个属性表现不同的东西。

为了解决此问题，您可以添加 min-width:0 以覆盖默认的 min-width 设置：

.wrap {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  border: 3px solid red;
  overflow-wrap: break-word; /* add */
}

.wrap .left,
.wrap .right {
  flex: 1;
}

.wrap .left {
  background: blue;
}

.wrap .right {
  background: green;
  min-width:0;
}

<div class="wrap">
  <div class="left">hello!</div>
  <div class="right">world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!world!</div>
</div>

【讨论】：

非常感谢您提供有趣的信息。我能够使用 min-width 确认 overflow-wrap 有效。这说明flexbox对宽度的控制有问题。但奇怪的是，作用完全相同的overflow-wrap和word-break中只有overflow-wrap受到影响。 overflow-wrap和`word-break`应该有问题，但我找不到。你知道吗？
@hayyvy 我也错过了那部分，无法找到描述的位置，所以最后可能是一个错误。
我认为这部分写的内容是相关的，但是出现的术语很难，我还看不懂。 5.1. Line Breaking Details
@hayyvy 是的，深入研究规范并不容易，这是一个工作草案，因此可能随时更改
注意：使用overflow: hidden会产生与min-width: 0类似的效果。