word — break
Что делать, если слово слишком длинное и не помещается в блок целиком?
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 5 июля 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство word — break определяет, как будет переноситься на новую строку текст при достижении края родительского контейнера.
Пример
Скопировать ссылку «Пример» Скопировано
p word-break: normal;>p word-break: normal; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
- normal — значение по умолчанию, длинные слова или строки с неразрывным пробелом не переносятся, даже если выходят за границы родительского блока.
- break — all — при достижении границы родительского блока перенос строки будет вставлен между любыми двумя символами.
- keep — all — перевод строки не будет использован в тексте на китайском, японском или корейском языках. Для текста на других языках будет применено normal .
- break — word (устаревшее) — разобьёт текст в любом месте, в том числе внутри слова, при достижении границы контейнера даже если доступен перенос по словам.
Свойство word — break можно глобально задать для всей страницы, добавив его в стили для селектора body .
Особенности переноса текста
Скопировать ссылку «Особенности переноса текста» Скопировано
Перенос текста в CSS происходит по определённым правилам, которые могут зависеть от языка и заданных CSS стилей (включает свойства word — break , line — break , white — space , text — align , text — justify и hyphens ). Вот некоторые правила из спецификации:
- Обязательные переносы: текст обязательно переносится на новую строку, если есть символы перевода строки (например, \n ).
- Мягкие переносы: это такие места, где текст переносится на новую строку, если он не умещается в текущей строке. Сюда относятся пробелы и другие символы-разделители. В некоторых языках между символами могут быть и другие мягкие переносы, которые зависят от языковых правил.
- Дефисы и слоги: в алфавитных языках, таких как английский и русский, слова могут быть разбиты на слоги и перенесены с использованием дефиса и языковых правил (кстати, язык определяется по HTML-атрибуту lang ). Автоматическим переносом слов с использованием дефиса управляет свойство hyphens .
- Особенности языка: некоторые языки имеют специфические правила переноса текста. В идеографических языках, таких как китайский, и слоговых языках, таких как корейский, перенос слов и разрыв строк происходит в других местах (например, между корейскими иероглифами может быть разрыв, даже если между ними нет пробела).
Когда определены возможные места переноса, подбирается подходящее место, учитывающее заданные стили. В случае с длинными словами, ссылками или другой последовательностью символов, которые не умещаются в одной строке, мы можем указать браузеру, как следует переносить текст, используя свойства overflow — wrap и word — break .
Также свойство word — break играет важную роль в CJK языках (китайский, японский и корейский): значение word — break : keep — all запрещает разрывать слова внутри CJK текста, где разрывы строк могут быть нежелательными между определёнными иероглифами.
На практике
Скопировать ссылку «На практике» Скопировано
Свойство word — break : break — all очень похоже на overflow — wrap : break — word по своей сути. Однако, есть некоторые различия в их работе.
Свойство word — break : break — all позволяет разрывать слова в любом месте, в том числе и в середине слова, чтобы уместить их в контейнере. С одной стороны, это можно привести к трудно читаемому тексту, с другой, такой перенос хорошо подходит для переноса длинных ссылок или, например, строк кода.
Свойство overflow — wrap : break — word пришло на смену word — wrap : break — word . Оно позволяет переносить длинные слова в любом месте, а не только посередине слова. Это означает, что браузер может добавить перенос слова в любом месте, если это позволяет уместить слово внутри контейнера. Это свойство также сохраняет целостность слов, если они могут поместиться внутри контейнера.
CSS свойство word-wrap
Свойство word-wrap определяет, переносить или нет длинные слова, чтобы они поместились в контейнере. Данное свойство позволяет перенос неразрывных слов.
Word-wrap имеет эффект, когда свойство white-space позволяет перенос.
В спецификации CSS3 свойство word-wrap имеет название overflow-wrap.
| Значение по умолчанию | normal |
| Применяется | Ко всем элементам. |
| Наследуется | Да |
| Анимируемое | Нет |
| Версия | CSS3 |
| DOM синтаксис | object.style.wordWrap = «break-word»; |
Синтаксис
word-wrap: normal | break-word | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> div < width: 120px; border: 1px solid #666; word-wrap: normal; > style> head> body> h2>Пример свойства word-wrap h2> div> Lorem Ipsum этоstrong>тексттексттексттексттекст strong> рыба", часто используемый в печати иstrong>вэб-дизайневэб-дизайневэб-дизайне strong>. div> body> html>Пример со значением «break-word»:
Пример
html> html> head> title>Заголовок документа title> style> div < width: 120px; border: 1px solid #666; word-wrap: break-word; > style> head> body> h2>Пример свойства word-wrap h2> div> Lorem Ipsum is strong>тексттексттексттексттекст strong> рыба", часто используемый в печати strong>вэб-дизайневэб-дизайневэб-дизайне strong>. div> body> html>Значения
| Значение | Описание |
|---|---|
| normal | Переносит слова в допустимых точках. Значение по умолчанию. |
| break-words | Переносит неразрывные слова. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
CSS свойство word-break
Обычно перенос строки происходит в тех местах, где есть пробел или дефис. Но когда свойство word-break установлено в значение break-all, браузер сделает перенос строки в любой точке.
| Значение по умолчанию | normal |
| Применяется | Ко всем элементам. |
| Наследуется | Да. |
| Анимируемое | Нет. |
| Версия | CSS3 |
| DOM синтаксис | object.style.wordBreak = «break-all»; |
Синтаксис
word-break: normal | break-all | keep-all | break-word | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> html, body < height: 100%; > body < font-family: Helvetica, san serif; display: flex; justify-content: center; align-items: center; background-color: #8ebf42; > p< word-break: break-all; line-height: 1; text-transform: uppercase; text-align: center; font-size:30px; font-weight: bold; color: #eee; width: 1em; > style> head> body> p>element p> body> html>Пример, где слова текста переносятся:
Пример
html> html> head> title>Заголовок документа title> style> body < font-size: 0.95em; line-height: 1.5; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; > .container < margin: 50px auto; max-width: 700px; > .text < padding: 20px; background-color: #666; color: white; text-align: justify; > .break < word-break: break-all; > strong < background-color: #000; > style> head> body> h2>Пример свойства word-break h2> div class="container"> h3>Text breaks inside words h3> p class="text break"> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. p> div> body> html>Значения
| Значение | Описание |
|---|---|
| normal | Использует правила переноса строк. Значение по умолчанию. |
| break-all | Перенос строк будет использован в любой точке, чтобы избежать выхода за границы./td> |
| keep-all | Перенос строк не используется для текстов на китайском, японском, корейском (CJK). А для остальных текстов работает также, как при значении normal. |
| break-word | Перенос строк происходит в любой произвольной точке, чтобы избежать выхода за границы. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
word-break
Свойство word-break указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область.
Синтаксис
word-break: normal | break-all | keep-all
Значения
normal Используются правила переноса строк по умолчанию. Как правило, в этом случае строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью тега
). break-all Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока. Значение не работает для текста на китайском, корейском или японском языке. keep-all Не разрешает перенос строк в словах на китайском, корейском или японском языке. Для остальных языков действует как normal .
HTML5 CSS3 IE Cr Op Sa Fx 15
word-break Cуществительное высокопревосходительство
Одушевленное существительное
одиннадцатиклассница
Химическое вещество
метоксихлордиэтиламинометилбутиламиноакридин
Результат данного примера показан на рис. 1.
Рис. 1. Перенос длинных слов