В чем разница между "word-break: break-all" и "word-wrap: break-word" в CSS

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.

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

word-wrap:break-word

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

word-break:break-all

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

jsfiddle demo.

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

ПЕРЕНОС

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

WORD-BREAK

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

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

вот что мы имеем:

overflow-wrap

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

возможно значения:

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

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

источник.

word-break

The word-break CSS свойство используется для указания того, следует ли разбивать строки в словах.

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

источник.

---

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

так:

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

соответствующего В3 технические характеристики - что довольно неясно из - за отсутствия контекста-можно вывести следующее:

• word-break: break-all для расставания сторонних дальневосточные (говорят западные) слова в 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-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>

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