В чем разница между & ldquo; перерывом на слово: break-all & rdquo; против & ldquo; перенос слов: break-word & rdquo; в CSS

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

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

369
задан BoltClock 17 May 2012 в 14:44
поделиться

10 ответов

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

201
ответ дан aaaidan 17 May 2012 в 14:44
поделиться

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

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

word-break: break-all

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

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

И если это не имеет значения, выбирайте и то, и другое.

381
ответ дан Gaurav Agarwal 17 May 2012 в 14:44
поделиться

С 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.
94
ответ дан aaaidan 17 May 2012 в 14:44
поделиться

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

word-wrap:break-word

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

word-break:break-all

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

enter image description here

jsfiddle demo .

41
ответ дан Jon Schneider 17 May 2012 в 14:44
поделиться

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

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

overflow-wrap

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

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

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

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

источник .

word-break

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

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

источник .


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

Итак:

  • overflow-wrap: break-word: В ситуации переполнения разбить слова.
  • word-break: break-all: В обычной ситуации просто разбить слова в конце строки. Переполнение не обязательно.
  • [Тысяча сто сорок два]
37
ответ дан André Pena 17 May 2012 в 14:44
поделиться

Из соответствующих спецификаций 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;
8
ответ дан Serge Stroobandt 17 May 2012 в 14:44
поделиться

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

WORD-WRAP

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

WORD-BREAK

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

22
ответ дан Jonny Haynes 17 May 2012 в 14:44
поделиться

Существует огромная разница в рендеринге.

Предположим, у вас есть строка 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 поместит как можно больше символов в строке. Таким образом, это приведет к довольно ужасному результату, поскольку такие слова, как «is», разбиты на 2 строки, когда они могли бы поместиться очень хорошо, если бы они были только переведены на новую строку ». Вот почему я редко использую break-all.

word-wrap: break-word

вывод:

This
is a
text
from
an old
magazi
ne

break-word будет разрывать только те слова, которые слишком длинные, чтобы уместиться в контейнер (например, «журнал», который равен 8 chars, и контейнер вмещает только 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
2
ответ дан Drkawashima 17 May 2012 в 14:44
поделиться

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

2
ответ дан user2619604 17 May 2012 в 14:44
поделиться

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>
9
ответ дан Ehsan 17 May 2012 в 14:44
поделиться
Другие вопросы по тегам:

Похожие вопросы: