Ответ 1

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

Ответ 2

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

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

word-break: break-all

• независимо от того, является ли оно непрерывным словом или многими словами, разбивает их на край предела ширины. (то есть даже внутри символов одного и того же слова)

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

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

Ответ 3

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

Ответ 4

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

word-wrap:break-word

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

word-break:break-all

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

jsfiddle demo.

Ответ 5

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

Теперь это то, что у нас есть:

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

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

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

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

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

источник.

слово-пауза

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

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

источник.

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

Итак:

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

Ответ 6

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

СЛОВО-WRAP

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

СЛОВО-BREAK

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

Ответ 7

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>

Ответ 8

Из соответствующих спецификаций 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;

Ответ 9

Существует огромная разница. 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

Ответ 10

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

Ответ 11

Я использую такую комбинацию:

.myOverflowableText {
  word-break: break-word; /* Chrome, Safari */
  overflow-wrap: anywhere; /* Firefox */
}

На этом сайте говорится, что в Chrome & Safari поддерживается перерыв на слова https://caniuse.com/#feat=word-break.

Но я обнаружил, что решение Firefox должно быть overflow-wrap: anywhere на этом сайте: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

Я еще не уверен насчет IE... Может быть, word-wrap: break-word; работает на IE?

Моя цель заключается в следующем:

Hello this is some |
text. I am writing |
some text.         |
Especially long    |
words go to the    |
next line like     |
this. This is a    |
veryveryveryveryve |
ryveryverylongword |
.                  |