Что такое break word
В чем разница между «word-break: break-all» и «word-wrap: break-word» в CSS
В настоящее время я задаюсь вопросом, в чем разница между ними. Когда я использовал оба, они, похоже, сломают слово, если оно не подходит для контейнера. Но почему W3C сделал два способа сделать это?
ОТВЕТЫ
Ответ 1
Спецификация W3, которая говорит об этих, кажется, предполагает, что word-break: break-all требуется для определенного поведения с CJK (китайским, японским и Корейский), тогда как word-wrap: break-word является более общим, не связанным с CJK, поведением.
Ответ 2
word-wrap: break-word недавно изменен на overflow-wrap: break-word
И если это не имеет значения, идите либо.
Ответ 3
С word-break начинается очень длинное слово в точке, в которой оно должно начинаться и он прерывается до тех пор, пока требуется
Ответ 4
По крайней мере, в Firefox (начиная с версии v24) и Chrome (начиная с версии v30) при применении к контенту в элементе table :
на самом деле не приведет к переносу длинных слов, что может привести к тому, что таблица превысит границы ее контейнера;
приведет к переводу слов и привязке таблицы к контейнеру.
Ответ 5
Теперь это то, что у нас есть:
Переполнение-обертка
Свойство overflow-wrap используется для указания того, может ли браузер прерывать строки в словах, чтобы предотвратить переполнение, когда в противном случае нерушимая строка слишком длинная, чтобы поместиться в ее поле.
normal: указывает, что линии могут ломаться только при нормальных точках прерывания слов.
break-word: указывает, что обычно нерушимые слова могут быть разбиты в произвольных точках, если в строке нет других допустимых точек останова.
слово-пауза
Свойство CSS word-break используется для указания того, следует ли разбивать строки внутри слов.
Теперь вернемся к вашему вопросу, основное различие между переполнением и word-break заключается в том, что первое определяет поведение в ситуации переполнения, а позднее определяет поведение в нормальной ситуации (без переполнения). Ситуация переполнения происходит, когда в контейнере недостаточно места для хранения текста. Разрыв линий в этой ситуации не помогает, потому что нет места (представьте себе коробку с шириной и высотой фиксации).
Ответ 6
Это все, что я могу узнать. Не уверен, что это помогает, но я думал, что добавлю его в микс.
СЛОВО-WRAP
Это свойство указывает, должна ли текущая линия визуализации сломаться, если содержимое превышает границу указанного поля рендеринга для элемента (это в какой-то мере похоже на свойства «клип» и «переполнение» в намерении.) Это свойство должно применять, если элемент имеет визуальный рендеринг, является встроенным элементом с явной высотой/шириной, абсолютно позиционируется и/или является блочным элементом.
СЛОВО-BREAK
Это свойство контролирует поведение нарушения строки в словах. Это особенно полезно в случаях, когда в элементе используются несколько языков.
Ответ 7
чтобы продолжить границу, а затем перерыв в новой строке.
Во-первых, перенос слов в новой строке затем продолжается.
Ответ 8
Из соответствующих спецификаций W3, которые, по-видимому, неясны из-за отсутствия контекста, можно сделать следующее:
По крайней мере, это были намерения W3. В результате на самом деле произошел серьезный взлет с несовместимостью браузера. Вот отличная запись различных проблем.
Следующий фрагмент кода может служить сводкой о том, как добиться переноса слов с помощью CSS в среде с несколькими браузерами:
Ответ 9
Существует огромная разница. break-all в основном непригоден для рендеринга читаемого текста.
Допустим, у вас есть строка This is a text from an old magazine в контейнере, которая вмещает только 6 символов в строке.
word-break: break-all
Как видите, результат ужасен. break-all попытается разместить как можно больше символов в каждом ряду, даже разделив двухбуквенное слово типа «есть» на 2 ряда! Это смешно. Вот почему break-all редко используется.
word-wrap: break-word
break-word будет разбивать только слова, которые слишком длинны, чтобы когда-либо помещаться в контейнер (например, «журнал», который составляет 8 символов, а контейнер вмещает только 6 символов). Он никогда не нарушит слова, которые могут полностью вместить контейнер, вместо этого он перенесет их на новую строку.
Ответ 10
Ответ 11
Я использую такую комбинацию:
На этом сайте говорится, что в Chrome & Safari поддерживается перерыв на слова https://caniuse.com/#feat=word-break.
Но я обнаружил, что решение Firefox должно быть overflow-wrap: anywhere на этом сайте: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
Я еще не уверен насчет IE. Может быть, word-wrap: break-word; работает на IE?
В чем разница между «word-break: break-all» и «word-wrap: break-word» в CSS
В настоящее время мне интересно, в чем разница между ними. Когда я использовал оба, они, кажется, нарушают слово, если оно не подходит к контейнеру. Но почему W3C сделал это двумя способами?
12 ответов
Спецификация W3, в которой говорится об этом, похоже, предполагает, что word-break: break-all предназначен для требует определенного поведения с текстом CJK (китайский, японский и корейский), тогда как word-wrap: break-word является более общим поведением, не связанным с CJK.
word-wrap: break-word недавно изменено на overflow-wrap: break-word
А если это не имеет значения, выбирайте то же самое.
С word-break очень длинное слово начинается с того места, где оно должно начинаться и он ломается до тех пор, пока требуется
Однако с word-wrap очень длинное слово НЕ БУДЕТ начинаться с того места, где оно должно начинаться. он переносится на следующую строку, а затем разбивается на столько, сколько требуется
Вот что у нас есть:
Свойство overflow-wrap используется, чтобы указать, может ли браузер разрывать строки внутри слов, чтобы предотвратить переполнение, когда неразрывная строка слишком длинна, чтобы поместиться в содержащее ее поле.
нормальный : указывает, что строки могут разрываться только в обычных точках разрыва слова.
break-word : указывает, что обычно неразрывные слова могут быть разбиты в произвольных точках, если в строке нет приемлемых точек разрыва.
Свойство CSS word-break используется для указания, следует ли разрывать строки в словах.
По крайней мере, в Firefox (начиная с версии 24) и Chrome (начиная с версии 30) при применении к контенту в элементе table :
Фактически не приведет к переносу длинных слов, что может привести к выходу таблицы за пределы своего контейнера;
приведет к переносу слов и размещению таблицы в своем контейнере.
Это все, что я могу узнать. Не уверен, что это поможет, но подумал, что добавлю его в смесь.
WORD-WRAP
Это свойство указывает, должна ли текущая отображаемая строка разрываться, если содержимое превышает границу указанного блока визуализации для элемента (в некотором смысле это похоже на свойства ‘clip’ и ‘overflow’ в намерении.) Это свойство должно применяться только если элемент имеет визуальную визуализацию, является встроенным элементом с явной высотой / шириной, абсолютно позиционирован и / или является блочным элементом.
WORD-BREAK
Это свойство управляет поведением разрыва строки в словах. Это особенно полезно в случаях, когда в элементе используется несколько языков.
Есть огромная разница. break-all в основном непригоден для рендеринга читаемого текста.
Допустим, у вас есть строка This is a text from an old magazine в контейнере, который умещает только 6 символов в строке.
word-break: break-all
Как видите результат ужасный. break-all попытается уместить как можно больше символов в каждую строку, он даже разделит двухбуквенное слово, например «is», на 2 строки! Это нелепо. Вот почему break-all редко когда-либо используется.
word-wrap: break-word
break-word будет разбивать только слова, которые слишком длинные, чтобы поместиться в контейнер (например, «журнал», который состоит из 8 символов, а контейнер вмещает только 6 символов). Он никогда не разбивает слова, которые полностью помещаются в контейнер, вместо этого он перемещает их на новую строку.
Слово, чтобы продолжить до границы, затем прервать новую строку.
Сначала перенос слов на новую строку, затем переход к границе.
По крайней мере, таковы были намерения W3. В результате произошло серьезное столкновение с несовместимостью браузеров. Вот отличное описание различных связанных с этим проблем..
Следующий фрагмент кода может служить кратким описанием того, как добиться переноса слов с помощью CSS в кросс-браузерной среде:
Одно только определение переноса слов и переноса слов может легко вскружить вам голову, но при сравнении этих двух, в частности, гораздо легче думать о них так:
Прежде всего вы, вероятно, захотите использовать overflow: auto; также, и вы, возможно, захотите попробовать, как выглядит использование только этого: если вы можете терпеть необходимость прокрутки текста в контейнере вместо произвольных позиций обтекания, это может быть именно то, что вам нужно.
Слово-разрыв: сломать все; Приоритетом является минимизация потраченного впустую пространства, избегая переполнения, прежде чем сохранять какие-либо слова неразрывными, поэтому он никогда не переносится где-либо, кроме правого поля. Он даже заменяет разрывы строк пробелами в содержащемся тексте. Это полезно, если вы хотите избежать прокрутки в максимально возможной степени и использовать контейнер, достаточно широкий для удобочитаемости: однако, если ваш контейнер слишком узкий, результат в целом не очень удовлетворительный, как заметил Дркавашима.
Перенос слов / перенос-переполнение: слово-разрыв; Отдает приоритет сохранению всех слов без разрывов, избегая при этом переполнения, поэтому, если слово слишком длинное, чтобы поместиться на остальной части строки, оно сначала переносится и пытается уместить остальной текст на следующей строке, даже если это означает выход из строки выше всего лишь одним символом. Это полезно, если вы хотите максимальной читабельности, избегая при этом максимально возможной прокрутки и используя достаточно широкий контейнер: в противном случае вы можете использовать вместо него только overflow: auto.
Что касается переноса слов, он на самом деле не заменен (и, возможно, также более широко признан, чем перенос переполнения браузерами, используемыми во всем мире): он стал псевдонимом для переноса переполнения, потому что все большие браузеры и многие многие веб-страницы уже приняли перенос слов, хотя изначально не был определен в стандартах. Однако из-за широкого использования он не был отброшен, когда был определен перенос переполнения, а скорее определен как псевдоним, которым он является сегодня, и по устаревшим причинам UA (пользовательские агенты, например, веб-браузеры) должны рассматривать перенос слов как унаследованный псевдоним имени свойства overflow-wrap. Таким образом, он стал де-факто стандартом W3C и не исчезнет в ближайшее время (возможно, когда стандарт W3C исчезнет или вся сеть будет повсеместно обновлена ботами с ИИ).
Smarter word break in CSS?
If I just put word-break: break-all on an element, I often end up with this:
Hello people, I am typing a mes
sage that’s too long to fit!
Obviously this would be much better as:
Hello people, I am typing a
message that’s too long to fit!
But at the same time if someone writes:
Then I’d want it to be:
I can’t seem to find a way to actually do this.
Note that the width of the element is not fixed and may change.
4 Answers 4
Try word-break: break-word; it should behave as you expect.
For a lot of our projects we usually add this where necessary:
It handles most odd situations with different browsers.
For smart word breaks, or for correct word breaks in the first place, you need language-dependent rules. For English and many other languages, the correct breaking means hyphenation, with a hyphen added at the end of a line when a break occurs.
Breaking long, unhyphenateable strings is a different issue. They would best be handled in preprocessing, but in a simple setting, word-break: break-word (which means incorrect breaking of words, in English for example) may be considered as an emergency.
The updated answer should be:
It will break a word that by itself would not be able to fit on its own line, but leave all other words as they are (see overflow-wrap here).
You could also use:
overflow-wrap:anywhere; but this will allow line breaks after any word in an effort to reduce the width of an element. See the difference described below from MDN:
[break-word is] The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.
Also, anywhere is not supported by Internet Explore, Safari, and some mobile browsers while break-word is supported on all major browsers (see [here][2]).
In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.
В чем разница между «word-break: break-all» и «word-wrap: break-word» в CSS
В настоящее время мне интересно, в чем разница между ними. Когда я использовал и то, и другое, они, кажется, ломают слово, если оно не подходит к контейнеру. Но почему W3C сделал два способа сделать это?
10 ответов
У меня есть небольшая проблема со стилем css. Я пытаюсь сделать breakline, если текст в промежутке слишком длинный. Я ожидаю, что перед третьим SPAN выполню разрыв строки. Но что-то идет не так. Пожалуйста, помогите. Код: Abcd abcdabcd2
word-wrap: break-word недавно изменено на overflow-wrap: break-word
И если это не имеет значения, идите на то или другое.
Однако с word-wrap очень длинное слово НЕ БУДЕТ начинаться с той точки, с которой оно должно начинаться. он переносится на следующую строку, а затем разрывается до тех пор, пока это необходимо
Теперь это то, что у нас есть:
переполнение-обертывание
Свойство overflow-wrap используется для указания того, может ли браузер разрывать строки внутри слов, чтобы предотвратить переполнение, когда в противном случае небьющаяся строка слишком длинна, чтобы поместиться в содержащее ее поле.
нормальный : указывает, что строки могут прерываться только в обычных точках разрыва слов.
разрывное слово : указывает, что обычно неразрывные слова могут быть разбиты в произвольных точках, если в строке нет других приемлемых точек разрыва.
слово-перерыв
Свойство word-break CSS используется для указания того, следует ли разбивать строки внутри слов.
Как имитировать word-break: break-word; для IE9, IE11 и Firefox? Кажется, он работает в Chrome. Я узнал и понял, что это нестандартно, только webkit. FYI, я пробовал использовать, white-space: pre-wrap; И еще кое-что вроде, overflow-wrap: break-word; Также попробовал упомянутый ниже CSS.
По крайней мере, в Firefox (по состоянию на v24) и Chrome (по состоянию на v30), когда применяется к содержимому в элементе table :
фактически не приведет к переносу длинных слов, что может привести к выходу таблицы за пределы ее контейнера;
приведет к переносу слов и помещению таблицы в контейнер.
Это все, что я могу узнать. Не уверен, что это поможет, но подумал, что я добавлю его в смесь.
ПЕРЕНОС СЛОВ
Это свойство указывает, должна ли текущая отрисованная строка прерываться, если содержимое превышает границу указанного поля отрисовки для элемента (это в некотором смысле похоже на свойства «клип» и «переполнение» в intent.) Это свойство должно применяться только в том случае, если элемент имеет визуальный рендеринг, является встроенным элементом с явным height/width,, абсолютно позиционирован и/или является блочным элементом.
СЛОВО-ПЕРЕРЫВ
Это свойство управляет поведением разрыва строк в словах. Это особенно полезно в тех случаях, когда в элементе используется несколько языков.
Есть огромная разница. break-all в основном непригоден для рендеринга читаемого текста.
Допустим, у вас есть строка This is a text from an old magazine в контейнере, который подходит только для 6 символов в строке.
word-break: break-all
Как вы можете видеть, результат ужасен. break-all попытается поместить в каждую строку как можно больше символов, он даже разделит слово из 2 букв, например «is», на 2 строки! Это смешно. Вот почему break-all редко используется.
word-wrap: break-word
break-word будет разбивать только слова, которые слишком длинны, чтобы когда-либо поместиться в контейнер (например, «magazine», который состоит из 8 символов, а контейнер подходит только для 6 символов). Он никогда не будет разбивать слова, которые могли бы полностью соответствовать контейнеру, вместо этого он будет толкать их на новую строку.
слово для продолжения границы, а затем разрыв в новой строке.
Следующий фрагмент кода может служить кратким описанием того, как добиться переноса слов с помощью CSS в кроссбраузерной среде:
Похожие вопросы:
Похоже, что word-wrap: break-word (и другие его версии для конкретных браузеров) обычно используются для пользовательских комментариев, которые могут работать долго. Мне кажется, что выполнение.
У меня есть div, где часто отображается большая строка без пробелов. Я хочу, чтобы текст обернулся вокруг div, как показано ниже: Я пытаюсь заставить его работать так, как показано слева. На Firefox.
Мне нужно было где-то исправить CSS, потому что мой текст не оборачивался вокруг и вместо этого продолжался бесконечно, если это было очень длинное слово. Как и в большинстве случаев, я попробовал.
У меня есть небольшая проблема со стилем css. Я пытаюсь сделать breakline, если текст в промежутке слишком длинный. Я ожидаю, что перед третьим SPAN выполню разрыв строки. Но что-то идет не так.
Я не понимаю, почему существуют два свойства, которые, кажется, делают одно и то же, но их взаимосвязь, по-видимому, не определена в спецификации. http:/ / dev.w3.org/csswg/css-text-3 /.
Как имитировать word-break: break-word; для IE9, IE11 и Firefox? Кажется, он работает в Chrome. Я узнал и понял, что это нестандартно, только webkit. FYI, я пробовал использовать, white-space.
У меня есть кнопка с именем пользователя в нем. Я использую Bootstrap 4. На всякий случай, если он слишком длинный, я хочу разбить имя, если оно длиннее определенного размера. Я не хочу, чтобы.
Smarter word break in CSS?
If I just put word-break: break-all on an element, I often end up with this:
Hello people, I am typing a mes
sage that’s too long to fit!
Obviously this would be much better as:
Hello people, I am typing a
message that’s too long to fit!
But at the same time if someone writes:
Then I’d want it to be:
I can’t seem to find a way to actually do this.
Note that the width of the element is not fixed and may change.
4 Answers 4
Try word-break: break-word; it should behave as you expect.
For a lot of our projects we usually add this where necessary:
It handles most odd situations with different browsers.
For smart word breaks, or for correct word breaks in the first place, you need language-dependent rules. For English and many other languages, the correct breaking means hyphenation, with a hyphen added at the end of a line when a break occurs.
Breaking long, unhyphenateable strings is a different issue. They would best be handled in preprocessing, but in a simple setting, word-break: break-word (which means incorrect breaking of words, in English for example) may be considered as an emergency.
The updated answer should be:
It will break a word that by itself would not be able to fit on its own line, but leave all other words as they are (see overflow-wrap here).
You could also use:
overflow-wrap:anywhere; but this will allow line breaks after any word in an effort to reduce the width of an element. See the difference described below from MDN:
[break-word is] The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.
Also, anywhere is not supported by Internet Explore, Safari, and some mobile browsers while break-word is supported on all major browsers (see [here][2]).
In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.