Повлияет ли `overflow-wrap: break-word` и` word-break: break-word` по-разному?

Question

Мой вопрос:

Есть ли разница между overflow-wrap: break-word и word-break: break-word?

Non-дубликаты:

Вот некоторые существующие вопросы, которые на первый взгляд могут показаться дублирующими, но это не так.

• В чем разница между "word-break: break-all" и "word-wrap: break-word" в CSS (Этот вопрос о word-break: break-all, но мой вопрос здесь о word-break: break-word)
• Разница между переполнением и переносом слов? (Этот вопрос касается атрибутов overflow-wrap и word-break, но мой вопрос здесь касается значения break-word для этих атрибутов, в частности. Также этот вопрос загадочно помечен как дубликат предыдущего вопроса, хотя он и не имеет отношения.)

Код:

Я написал этот фрагмент кода, который показывает, что и overflow-wrap: break-word, и word-break: break-word ведут себя одинаково. Но я точно не знаю, учел ли я все случаи. Может быть, есть случай, в котором они ведут себя по-разному?

.ow {
  overflow-wrap: break-word;
  background: lightgreen;
}

.wb {
  word-break: break-word;
  background: lightblue;
}

div {
  width: 5em;
  display: inline-block;
}

<div class="ow">
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
</div>

<div class="wb">
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
</div>

<div class="ow">
Most words are short and don't need to break. But Antidisestablishmentarianism is long.
</div>

<div class="wb">
Most words are short and don't need to break. But Antidisestablishmentarianism is long.
</div>

Поддержка браузера:

• https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#Browser_compatibility показывает, что overflow-wrap: break-word поддерживается начиная с Chrome 23, Edge 18, Firefox 49, Safari 6.1. Это не поддерживается в IE. (Я игнорирую нестандартное имя word-wrap здесь. Меня волнует только стандартное имя.)
• https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Browser_compatibility показывает, что word-break: break-word поддерживается начиная с Chrome 1, Firefox 67, Safari 3. Это не поддерживается в IE и Edge.

Учитывая матрицу поддержки браузера, похоже, overflow-wrap: break-word работает со всеми современными браузерами.

Что я хочу знать, если вы можете представить какой-либо текст или HTML, который бы заставил overflow-wrap: break-word и word-break: break-word вести себя по-разному?

Answer 1

Чтобы упростить его, word-wrap является более старой версией overflow-wrap и была заменена на overflow-wrap в текущей спецификации CSS3.Это правило позволяет вам сказать браузеру, что он может разбивать слова, когда они слишком длинные.

С другой стороны, перерыв в слове позволяет вам сказать браузеру как, чтобы разбить слова.

Как вы отметили в своем вопросе, значение break-word для обоих этих правил будет вести себя одинаково.См. Эти определения по ссылкам, которые я предоставил выше:

word-break: break-word:

Чтобы предотвратить переполнение, обычно неразрывные слова могут быть разбиты в произвольных точках, если нет других приемлемых точек остановав строке.

overflow-wrap: break-word:

То же, что и значение в любом месте, где обычно неразрывные слова могут быть разбиты в произвольных точках, если нет других приемлемыхточки разрыва в строке, но возможности мягкого переноса, представленные словом «разрыв», НЕ учитываются при расчете собственных размеров минимального содержимого.