В чем разница между "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
будет результат в оборачивать слов, и штуцере таблицы внутри свой контейнер.
Это все, что я могу узнать. Не уверен, что это поможет, но подумал, что я добавлю его в микс.
ПЕРЕНОС
Это свойство указывает, должна ли текущая отрисованная строка прерываться, если содержимое превышает границу указанного окна отрисовки для элемента (это в некотором роде похоже на свойства "клип" и "переполнение" в 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
.