Css style break all

line-break

The line-break CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.

Try it

Syntax

/* Keyword values */ line-break: auto; line-break: loose; line-break: normal; line-break: strict; line-break: anywhere; /* Global values */ line-break: inherit; line-break: initial; line-break: revert; line-break: revert-layer; line-break: unset; 

Values

Break text using the default line break rule.

Break text using the least restrictive line break rule. Typically used for short lines, such as in newspapers.

Break text using the most common line break rule.

Break text using the most stringent line break rule.

There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the word-break property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.

Formal definition

Formal syntax

line-break =
auto |
loose |
normal |
strict |
anywhere

Examples

Setting text wrapping

See whether the text is wrapped before «々», «ぁ» and «。».

HTML

div lang="ja"> p class="wrapbox auto"> auto:br />そこは湖のほとりで木々が輝いていた。br />その景色に、美しいなぁと思わずつぶやいた。 p> p class="wrapbox loose"> loose:br />そこは湖のほとりで木々が輝いていた。br />その景色に、美しいなぁと思わずつぶやいた。 p> p class="wrapbox normal"> normal:br />そこは湖のほとりで木々が輝いていた。br />その景色に、美しいなぁと思わずつぶやいた。 p> p class="wrapbox strict"> strict:br />そこは湖のほとりで木々が輝いていた。br />その景色に、美しいなぁと思わずつぶやいた。 p> p class="wrapbox anywhere"> anywhere:br />そこは湖のほとりで木々が輝いていた。br />その景色に、美しいなぁと思わずつぶやいた。 p> div> 

CSS

.wrapbox  width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; > .auto  line-break: auto; > .loose  line-break: loose; > .normal  line-break: normal; > .strict  line-break: strict; > .anywhere  line-break: anywhere; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

word-break

Свойство CSS word-break определяет, где будет установлен перевод на новую строку в случае превышения текстом границ блока.

Интерактивный пример

Синтаксис

/* Значения ключевых слов */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; /* не включено в стандарт */ /* Глобальные значения */ word-break: inherit; word-break: initial; word-break: unset; 

Свойство word-break определяется одним из описанных ниже ключевых слов.

Значения

Поведение по умолчанию для расстановки перевода строк.

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

Перевод строки не будет использован в тексте на китайском/японском/корейском языке. Для текста на других языках будет применено поведение по умолчанию ( normal ).

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

Примечание: В отличие от word-break: break-word и overflow-wrap: break-word (смотри overflow-wrap ), word-break: break-all вставит перевод строки в том месте, где текст будет превышать занимаемый им блок (даже в том случае, когда текст можно перенести по словам).

Формальный синтаксис

word-break =
normal | (en-US)
keep-all | (en-US)
break-all | (en-US)
break-word

Примеры

HTML

p>1. code>word-break: normalcode>p> p class="normal narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉p> p>2. code>word-break: break-allcode>p> p class="breakAll narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉p> p>3. code>word-break: keep-allcode>p> p class="keepAll narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉p> p>4. code>word-break: break-wordcode>p> p class="breakWord narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉p> 

CSS

.narrow  padding: 5px; border: 1px solid; display: table; max-width: 100%; > .normal  word-break: normal; > .breakAll  word-break: break-all; > .keepAll  word-break: keep-all; > .breakWord  word-break: break-word; > 

Спецификации

Specification	Status	Comment
CSS Text Module Level 3 Определение ‘word-break’ в этой спецификации.	Кандидат в рекомендации	Initial definition

Начальное значение	normal
Применяется к	все элементы
Наследуется	да
Обработка значения	как указано
Animation type	discrete

Браузерная совместимость

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Css style break all

Добавим div? в который поместим некий, текст :

Результат применения word-break: break-all

Привет мир — это тестовый текст в тестовом диве, блоке, который понадобился для того, чтобы проверить работу свойства для переноса слов и строк в случае необходимости! И нам потребуется для проверки переносов пару слов очень длинных например: достопримечательность рентгеноэлектрокардиографического

Перенос строки css : word-break: break-word.

Поступаем аналогично, что делали в предыдущем пункте!

Word-break может принимать еще одно значение, которое нас интересует для переноса строк и слов на новую строку break-word

Результат применения word-break: break-word

Привет мир — это тестовый текст в тестовом диве, блоке, который понадобился для того, чтобы проверить работу свойства для переноса слов и строк в случае необходимости! И нам потребуется для проверки переносов пару слов очень длинных например: достопримечательность рентгеноэлектрокардиографического

Перенос строки css : overflow-wrap: break-word.

Еще одно свойство для переноса строки : overflow-wrap , со значением break-word которое существует для переноса строк и слов, в том случае, если слова заходят за пределы блока.

Результат применения overflow-wrap: break-word

Привет мир — это тестовый текст в тестовом диве, блоке, который понадобился для того, чтобы проверить работу свойства для переноса слов и строк в случае необходимости! И нам потребуется для проверки переносов пару слов очень длинных например: достопримечательность рентгеноэлектрокардиографического

Источник

CSS word-break Property

The word-break property specifies how words should break when reaching the end of a line.

Default value:	normal
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.wordBreak=»break-all» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
normal	Default value. Uses default line break rules
break-all	To prevent overflow, word may be broken at any character	Demo ❯
keep-all	Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value «normal»	Demo ❯
break-word	To prevent overflow, word may be broken at arbitrary points	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник