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 (свойства overflow-wrap, word-wrap, word-break, hyphens)
По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.
Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим word-break: keep-all; .
Для того, чтобы браузер не обращал внимания и на мягкий дефис, вставляем hyphens: none; .
Если требуется перенос слов, то word-wrap: break-word; советую применять всегда, поскольку он понимается всеми браузерами. Он отличается от word-break: break-all; , которое является приоритетным, тем, что слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.
При совместном использовании word-break: break-all; с hyphens: auto; , последнее игнорируется. hyphens: auto; расставляет любые дефисы по своему усмотрению. Но для того, чтобы оно работало, нужно обозначить свой язык, указав в div атрибут lang=»ru» .
Не переносить слова на другую строку
Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим «по умолчанию» и добавить white-space: pre; или white-space: nowrap;. Нажмите на white-space: nowrap; и посмотрите на наш полигон.
Управлять переносом слов при hyphens: auto;
Тетрагидропиранилциклопентилтетрагидропиридо пиридино вые
Тетрагидропиранилциклопентилтетрагидропиридопиридиновые.hyphens < -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* пока поддерживает только Firefox */ text-align: justify; >.nohyphens
White-space, word-wrap и их друзья :: Хранитель заметок
Для разного контента нужны разные правила форматирования: фрагменты кода должны сохранять все переносы строк и табуляцию; текст, написанный случайным посетителем сайта, не должен «порвать» вёрстку и т.п. Форматирование можно контролировать с помощью CSS.
Свойство white-space
CSS свойство white-space описывает то, как будут обрабатываться пробельные символы внутри элемента.
| Новая строка | Пробелы и табуляция | Перенос текста | |
|---|---|---|---|
| normal | схлопывается | схлопываются | есть |
| nowrap | схлопывается | схлопываются | нет |
| pre | остаётся | остаются | нет |
| pre-wrap | остаётся | остаются | есть |
| pre-line | остаётся | схлопываются | есть |
Значения pre-wrap и pre-line доступны во всех современных версиях браузеров и в IE начиная с версии 8.0.
Свойство word-wrap
Изначально это свойство появилось в линейке браузеров IE и только потом перекочевало в другие браузеры, так и не появившись в спецификации CSS2. В CSS3 аналогичное поведение закреплено за свойством overflow-wrap, а word-wrap останется в качестве псевдонима.
Это свойство может принимать значения:
Переносы строк будут формироваться только в дозволенных позициях.
Слово будет разрываться, если в пределах строки нет подходящей позиции для переноса строки.
Это свойство можно использовать для переноса строк в теге даже в старых версиях IE:
Свойство word-break
Когда нужно применить «грубую силу» и переносить любую строку в любом месте (я даже не представляю себе где это может потребоваться), то в дело вступает word-break.
.text_user-generated_yes
Это свойство имеет больший приоритет, чем word-wrap (overflow-wrap) и будет разрывать слова даже там, где это особо и не требуется.
В браузерах на Webkit это свойство имеет ещё одно нестандартное значение – break-word, которое по своему действию аналогично word-wrap .
Свойство hyphens
С нетерпением ждём, когда браузеры начнут делать автоматическую расстановку переносов в словах.
.text
Основным препятствием на пути внедрения этой технологии стоит то, что браузеру требуется описание правил переноса слов для различных языков. На сегодняшний день только Safari и Firefox могут похвастаться этим.
Ещё заметки со схожей тематикой
- Преобразователь кода символа
- Запрет на перенос текста между колонками
- CSS3 transition прозрачности и видимость блока
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. Перенос длинных слов