В настоящее время мне интересно, в чем разница между ними. Когда я использовал оба, они словно ломают слово, если оно не подходит к контейнеру. Но почему W3C сделал два способа сделать это?

Спецификация W3, в которой говорится об этом, как представляется, предполагает, что word-break: break-allона требует особого поведения с текстом CJK (китайский, японский и корейский), в то word-wrap: break-wordвремя как это более общее поведение, не поддерживающее CJK.

word-wrap: break-word недавно изменился на overflow-wrap: break-word

• перенесет длинные слова на следующую строку.
• настраивает разные слова так, чтобы они не ломались посередине.

word-break: break-all

• независимо от того, является ли это непрерывным словом или множеством слов, разбивает их на границе ограничения ширины. (т.е. даже в пределах символов одного и того же слова)

Поэтому, если у вас есть много диапазонов фиксированного размера, которые получают содержимое динамически, вы можете просто предпочесть использовать word-wrap: break-word, так как таким образом только непрерывные слова разбиваются между ними, и в случае, если это предложение содержит много слов, пробелы корректируются для получения неповрежденных слов (без перерыва в слове).

И если это не имеет значения, иди либо.

При word-breakэтом очень длинное слово начинается с того места, с которого оно должно начинаться, и оно прерывается столько, сколько требуется

[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live 
inside this narrow paragr
aph.

Однако word-wrapочень длинное слово НЕ БУДЕТ начинаться с того места, с которого оно должно начинаться. он переносится на следующую строку, а затем прерывается столько, сколько требуется

[X] I am a text that 
012345678901234567890123
4567890123456789 want to
live inside this narrow 
paragraph.

word-wrapбыл переименован, overflow-wrapвероятно, чтобы избежать этой путаницы.

Теперь вот что мы имеем:

Переполнение-обертка

Свойство overflow-wrap используется для указания того, может ли браузер разбивать строки в словах, чтобы предотвратить переполнение, если неразрывная строка в противном случае слишком длинна, чтобы поместиться в ее содержащую рамку.

Возможные значения:

• normal : указывает, что строки могут разрываться только в обычных точках разрыва слова.

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

источник .

слово-брейк

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

• normal : используйте правило разрыва строки по умолчанию.
• break-all : Разрыв слова может быть вставлен между любыми символами для текста не-CJK (китайский / японский / корейский).
• keep-all : не допускать разрывы слов для текста CJK. Поведение текста не-CJK такое же, как и для обычного.

источник .

Теперь вернемся к вашему вопросу. Основное различие между overflow-wrap и word-break заключается в том, что первое определяет поведение в ситуации переполнения , а второе определяет поведение в нормальной ситуации (без переполнения). Переполнение ситуация происходит , когда контейнер не имеет достаточно места для хранения текста. Разрывание линий в этой ситуации не помогает, потому что там нет места (представьте прямоугольник с фиксированной шириной и высотой).

Так:

• overflow-wrap: break-word: В ситуации переполнения разбить слова.
• word-break: break-allВ обычной ситуации просто разбить слова в конце строки. Переполнение не обязательно.

По крайней мере, в Firefox (начиная с версии v24) и Chrome (начиная с версии v30), применительно к содержимому tableэлемента:

word-wrap:break-word

фактически не приведет к переносу длинных слов, что может привести к тому, что таблица превысит границы своего контейнера;

word-break:break-all

приведет к переносу слов и подгонке таблицы внутри контейнера.

jsfiddle demo .

Это все, что я могу узнать. Не уверен, что это поможет, но думал, что я добавлю это в микс.

ПЕРЕНОС СЛОВА

Это свойство указывает, должна ли текущая отображаемая строка прерываться, если содержимое превышает границу указанного поля рендеринга для элемента (в некоторых отношениях это похоже на свойства clip и overflow). Это свойство должно применяться только если элемент имеет визуальную визуализацию, является встроенным элементом с явной высотой / шириной, абсолютно позиционирован и / или является блочным элементом.

WORD-BREAK

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

Там огромная разница. break-allв основном непригоден для рендеринга читаемого текста.

Допустим, у вас есть строка This is a text from an old magazineв контейнере, которая вмещает только 6 символов в строке.

word-break: break-all

This i
s a te
xt fro
m an o
ld mag
azine

Как видите, результат ужасен. break-allпостарается разместить как можно больше символов в каждом ряду, он даже разделит двухбуквенное слово типа «есть» на 2 ряда! Это нелепо. Вот почему break-allредко используется.

word-wrap: break-word

This
is a
text
from
an old
magazi
ne

break-wordбудет разбивать только те слова, которые слишком длинные, чтобы вместить контейнер (например, «журнал», который составляет 8 символов, а контейнер вмещает только 6 символов). Он никогда не нарушит слова, которые могут полностью вместить контейнер, вместо этого он выведет их на новую строку.

<div style="width: 100px; border: solid 1px black; font-family: monospace;">
  <h1 style="word-break: break-all;">This is a text from an old magazine</h1>
  <hr>
  <h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>
</div

word-break:break-all :

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

word-wrap:break-word :

Сначала перенос слов в новой строке, затем переход к границе.

Пример :

div {
   border: 1px solid red;
   width: 200px;
}

span {
  background-color: yellow;
}

.break-all {
  word-break:break-all;
 }
.break-word {
  word-wrap:break-word;  
}

<b>word-break:break-all</b>

<div class="break-all">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

<b> word-wrap:break-word</b>

<div class="break-word">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

Из соответствующих спецификаций W3, которые оказываются довольно неясными из-за отсутствия контекста, можно сделать следующее:

• word-break: break-all предназначен для разделения иностранных, не-CJK (скажем, западных) слов в символьных текстах CJK (китайский, японский или корейский).
• word-wrap: break-word для разрыва слов в несмешанном (скажем, исключительно западном) языке.

По крайней мере, это были намерения W3. В результате произошло серьезное сближение с несовместимостью браузеров. Вот отличное описание различных проблем .

Следующий фрагмент кода может служить кратким описанием того, как добиться переноса слов с помощью CSS в кросс-браузерной среде:

-ms-word-break: break-all;
 word-break: break-all;

 /* Non standard for webkit */
 word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

В дополнение к предыдущим комментариям поддержка браузера word-wrapкажется немного лучше, чем для word-break.