Question

我使用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>

如果flex项具有长文本，则此布局会溢出flex容器。

.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>

因此，我使用了溢出包装属性。但这没用。

.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>

奇怪的是，与“溢出包装”具有相同作用的“断字”效果很好。（“ 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>

“断字”和“自动换行”有什么区别？从W3C文档中，我们找不到与上述行为有关的任何差异。

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

Answer 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>

Answer 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>

为什么“断字”有效，但“自动换行”无效？

2 个答案: