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

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

9 ответов


спецификация 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.

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

word-wrap:break-word

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

word-break:break-all

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

enter image description here

jsfiddle demo.


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

ПЕРЕНОС

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

WORD-BREAK

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


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

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

переполнение-wrap

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

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

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

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

источник.

word-break

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

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

источник.


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

так:

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

соответствующего 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-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.