Почему «разрыв слов» работает, а перенос слов не работает?

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>

Этот макет переполняет гибкий контейнер, если у гибкого элемента длинный текст.

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

Странно, "разрыв слова" с той же ролью, что и "переполнение-перенос", работал нормально.(«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

Как вы уже заметили, оба должны вести себя одинаково, и проблема как-то связана с 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>

Я не знаю точно, почему, но, похоже, это связано с min-width настройкой 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>

Answer 2

Они очень похожи.Одна проблема заключается в том, что 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>