Мені зараз цікаво, в чому різниця між ними. Коли я використовував обидва, вони, здається, ламають слово, якщо воно не вміщує контейнер. Але чому 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ймовірно, щоб уникнути цієї плутанини.

Тепер це те, що ми маємо:

переливати-загортати

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

Можливі значення:

• нормальний : вказує на те, що рядки можуть перериватися лише у нормальних точках розриву слів.

• Слово на розрив : вказує на те, що зазвичай нерозривні слова можуть бути порушені у довільних точках, якщо в рядку немає інших прийнятних точок перерви.

джерело .

слово-перерва

Слово розбиття CSS властивість використовується , щоб вказати , слід розривати рядки в межах слів.

• нормально : Використовуйте правило розриву рядків за замовчуванням
• break-all : переривання слів може бути вставлено між будь-якими символами для тексту, що не є CJK (китайською / японською / корейською).
• Keep-all : Не дозволяйте переривання слів для тексту CJK. Поведінка тексту, що не стосується CJK, така ж, як і для звичайного.

джерело .

Тепер повернемось до вашого питання, головна відмінність переповнення переповнення та переривання слів полягає в тому, що перший визначає поведінку в ситуації переповнення , а пізніше визначає поведінку в нормальній ситуації (без переповнення). Переповнення ситуація відбувається , коли контейнер не має достатньо місця для зберігання тексту. Розривання ліній у цій ситуації не допомагає, оскільки місця немає (уявіть коробку з шириною та висотою виправлення).

Тому:

• overflow-wrap: break-word: Про ситуацію, що переповнює, розбийте слова.
• word-break: break-all: У звичайній ситуації просто переламайте слова в кінці рядка. Переповнення не потрібно.

Принаймні у Firefox (станом на v24) та Chrome (станом на v30), коли застосовується до вмісту в tableелементі:

word-wrap:break-word

насправді не призведе до загортання довгих слів, внаслідок чого таблиця перевищить межі її контейнера;

word-break:break-all

це призведе до загортання слів, а до столу поміститься в його контейнер.

jsfiddle демо .

Це все, що я можу дізнатися. Не впевнений, чи допомагає це, але подумав, що додав би його до суміші.

ПЕРЕНОС СЛІВ

Це властивість визначає, чи повинен розбиватися поточний виведений рядок, якщо вміст перевищує межу зазначеного вікна візуалізації для елемента (це певним чином подібне до властивостей 'clip' та 'overflow' у намірі). Це властивість має застосовуватися лише якщо елемент має візуальну візуалізацію, це вбудований елемент з явною висотою / шириною, абсолютно розміщений та / або блоковий елемент.

СЛОВО-ВИПУСК

Ця властивість керує поведінкою розриву рядків у словах. Це особливо корисно у випадках, коли в межах елемента використовується кілька мов.

Є величезна різниця. 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.