Я обнаружил, что мне пришлось обнаружить внутреннюю часть метода расширения, который я пытался издеваться над входом, и издеваться над тем, что происходило внутри расширения.
Я просмотрел с использованием расширения, добавив добавление кода непосредственно к вашему методу. Это мне не нужно было издеваться над тем, что происходит внутри расширения, а не с самим расширением.
Спецификация 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
приведет к переносу слов и установке таблицы внутри своего контейнера.
word-wrap
был переименован в overflow-wrap
, вероятно, чтобы избежать этой путаницы.
Теперь это то, что у нас есть:
Свойство overflow-wrap используется для указания, может ли браузер сломаться строки в словах, чтобы предотвратить переполнение, если неразрывная строка слишком длинна, чтобы поместиться в ее ячейку.
Возможные значения:
normal : указывает, что строки могут разрываться только в обычных точках разрыва слова.
разрывное слово : указывает, что обычно неразрывные слова могут быть разбиты в произвольных точках, если в строке нет других приемлемых точек останова.
источник .
CSS-свойство word-break используется для указания, следует ли разбивать строки в словах.
источник .
Теперь вернемся к вашему вопросу. Основное различие между overflow-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-WRAP
Это свойство указывает, должна ли текущая отображаемая строка разрываться, если содержимое превышает границу указанного поля рендеринга для элемента (в некоторых отношениях это похоже на свойства 'clip' и 'overflow' в намерении.) Это свойство должно применяться, только если элемент имеет визуальный рендеринг, является встроенным элементом с явной высотой / шириной, абсолютно позиционирован и / или является блочным элементом.
WORD-BREAK
Это свойство управляет поведением разрыва строки в словах. Это особенно полезно в тех случаях, когда в элементе используется несколько языков.
Существует огромная разница в рендеринге.
Предположим, у вас есть строка 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
В дополнение к предыдущим комментариям поддержка браузера для word-wrap
, кажется, немного лучше, чем для word-break
.
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>