В чем разница между «перерыв в слове: разбить все» и «перенос слов: перерыв» в CSS


397

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

Ответы:


215

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


28
Также обратите внимание, что word-wrap - это устаревшее имя для более нового свойства "overflow-wrap" в спецификации. w3.org/TR/css3-text/#overflow-wrap
Squareman

12
Проще говоря: « word-breakопределяет возможности мягкого переноса между буквами…» Спецификация W3C использует текст CLK в качестве примера , но это не единственное предназначение. Обычно используется word-breakвместе с длинными строками (такими как URL или строки кода), когда вы хотите, чтобы они ломались при ширине контейнера - особенно если контейнер является preэлементом или ячейкой таблицы, где word-wrapсвойство может работать не так, как ожидалось .
Gfullam

1
Потому что спецификация использует только азиатские языки в качестве примера, а не в качестве единственной предполагаемой цели свойства (как также описано в gfullam), что, тем не менее, является основным выводом этого ответа.
Шиккедиль

3
word-wrap: break-word -> не будет разбивать таблицу ---- word-break: break-all -> разбивает таблицы
Фернандо Сильва

1
Обратите внимание, что ссылка W3C, о которой упоминал @squareman, теперь называется w3.org/TR/css-text-3/#overflow-wrap-property
Чарльз Вуд,

409

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

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

word-break: break-all

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

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

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


28
Почему это не принято? Этот ответ более полезен для большинства пользователей. Поведение CJK относится только к очень международным веб-сайтам.
MarioDS

3
Короткий, но приятный ответ! Хотя, возможно, вы захотите изменить перенос слов на перелив?
Гаурав Агарвал

5
@MarioDS это относится к «очень международным сайтам» или, как их называют 20% мира, «сайтам»
fregante

1
@GauravAgarwal: следует отметить, что IE (даже в последней версии) по-прежнему опирается на устаревшее имя. См. Caniuse.com/#search=overflow-wrap
Феликс Винберг

2
Символ «принятый ответ» относится только к спрашивающему, актуален для правильности ответа, когда он был актуален для него / него в то время, вот и все. От пользователей не ожидается, что они вернутся к своим вопросам через пару лет и рассмотрят новые ответы. Подсчет голосов в ответе показывает сообществу "принятый ответ".
elpddev

98

При 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.

2
Это все еще тот случай, если вы используете break-word. Я досадно обнаружил, что word-breakнарушает URL, но нет word-wrap. Оба, использующие, break-wordполучили это от css-tricks.com/snippets/css/…
T

44

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

Теперь вот что мы имеем:

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

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

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

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

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

источник .

слово-брейк

Слово разбития CSS свойство используется , чтобы указать , следует ли разрывать строки в пределах слов.

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

источник .


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

Так:

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

4
Отличное объяснение. Один пример, с которым я столкнулся только что: длинные слова в ячейке таблицы. overflow-wrap/ word-wrapне заставил их обернуть. Предположительно, потому что ячейки таблицы без фиксированной ширины расширяются вместо переполнения. Вместо этого стол расширился и столкнулся с другими элементами. word-breakс другой стороны исправили это.
Хенрик Н

@HenrikN table-layout: fixed;(возможно, вместе с width/ max-width) может заставить его работать, overflow-wrap/word-wrapно это зависит от конкретного варианта использования; просто word-breakможет быть не то, что вы хотите.
17

42

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

word-wrap:break-word

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

word-break:break-all

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

введите описание изображения здесь

jsfiddle demo .


5
Вы можете использовать, table-layout:fixedчтобы таблица не расширялась при использованииword-wrap:break-work
veksen

@vesken Я не мог заставить это работать (в Firefox 26). Не могли бы вы предоставить обновленную версию моего jsfiddle, указанного выше, чтобы продемонстрировать, что вы имеете в виду?
Джон Шнайдер

3
Я заставил его работать, добавив ширину таблицы, либо 100%, либо переместив ширину контейнера в 80 пикселей на стол. jsfiddle.net/SDGAX/37 Поведение таблицы, однако, не то же самое, используяtable-layout:fixed
veksen

2
Такое поведение также происходит при использовании word-wrapвместе с preтегами в Firefox, если для них не определена фиксированная ширина. Использование word-breakдает желаемый результат. Я связался с этим ответом в комментарии, опубликованном выше, потому что он демонстрирует общий случай использования.
Gfullam

Также элементы display-inline без ширины не подвержены «переносу слов», но «разбиение по словам» все еще работает.
ТФЭ

22

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

ПЕРЕНОС СЛОВА

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

WORD-BREAK

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


Спасибо за это, так как я искал разницу между word-wrap&, word-breakкоторая может иметь значениеbreak-word
Чад

10

Там огромная разница. 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


Очень хорошо объяснил. Пример показывает разницу очень ясно. Это должен быть принятый ответ!
naitsirch

9

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;

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.