word-wrap
Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область. Данное свойство носит черновой характер и при валидации документа на CSS3 выдает ошибку.
Синтаксис
word-wrap: normal | break-word | inherit
Значения
normal Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью тега
). break-word Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока. inherit Наследует значение родителя.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
word-wrap Cуществительное высокопревосходительство
Одушевленное существительное
одиннадцатиклассница
Химическое вещество
метоксихлордиэтиламинометилбутиламиноакридин
Результат данного примера показан на рис. 1.
Рис. 1. Перенос длинных слов
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. Перенос длинных слов
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 | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
| 23.0+ | 49.0+ | 6.1+ | 12.1+ |