От автора: в современном мире крайне важно, чтобы сайт был адаптивным и корректно отображался на любых устройствах. К сожалению, даже с огромным старанием вы можете столкнуться с проблемами в макетах. Иногда сбои в макетах происходят из-за слишком длинных слов, которые не помещаются в отведённое пространство.
Проблема переполнения контента может возникнуть, когда вы работаете с пользовательским контентом, который не поддаётся вашему контролю. Типичный случай — это раздел комментариев на блоге. Поэтому необходимо применять правильные стили, чтобы избежать переполнения контейнера содержимым.
Свойства CSS word-wrap, overflow-wrap и word-break позволяют управлять обертыванием и переносом слов, которые могут выходить за пределы своего контейнера. В этой статье представлено исчерпывающее руководство по данным свойствам CSS и рекомендациям по их применению, чтобы избежать появления переполнения содержимого и сохранить целостность вашего аккуратно оформленного дизайна.
Прежде чем мы начнем, давайте разберемся, как браузеры переносят контент в следующую секцию.
Как происходит перенос контента в браузерах?
Браузеры осуществляют перенос текста в допустимые брейкпоинты, что называется «мягкой оберткой». При наличии возможности браузер обернет контент с применением мягкой обертки, чтобы свести к минимуму переполнение содержимого.
В английском языке и большинстве языковых систем, аналогичных ему, мягкие обертки по умолчанию появляются на границах слов, если переносы отсутствуют. Поскольку слова разделяются пробелами и знаками препинания, именно в этих местах реализуются мягкие обертки.
Хотя в английских текстах для символов пробела используются мягкие обертки, для неанглийских систем письма ситуация может быть иной. Некоторые языки не используют пробелов для разделения слов. Следовательно, упаковка содержимого зависит от языка или системы письма. Значение атрибута lang, которое вы указываете в элементе html, в основном используется для определения того, какая языковая система используется. В этой статье основное внимание будет уделено системе письма на английском языке.
Стандартного переноса при использовании мягкой обертки может не хватить, если вы работаете с длинным непрерывным текстом, таким как URL или пользовательский контент, над которым у вас нет достаточного контроля.
Перед тем как углубиться в детальное описание этих CSS-свойств, рассмотрим различия между мягким и принудительным переносом строки в следующем разделе.
В чем разница между мягким и принудительным переносом строки?
Каждый переход текста, возникающий при применении мягкого переноса, обозначается как разрыв мягкого переноса. Для того чтобы перенос осуществлялся с применением мягкого обертывания, нужно убедиться, что обертывание активировано. Например, если установить значение nowrap для свойства white-space, перенос будет отключен.
С другой стороны, принудительные разрывы строк возникают из-за явного управления разрывом строк или указания конца или начала блоков текста.
CSS свойства word-wrap и overflow-wrap
Название word-wrap — это устаревшее имя свойства overflow-wrap. Word-wrap изначально было расширением Microsoft. Оно не было частью стандарта CSS, хотя большинство браузеров реализовали его под названием word-wrap. Согласно проекту спецификации CSS3, браузеры должны рассматривать word-wrap как устаревший псевдоним для свойства overflow-wrap.
В последних версиях популярных веб-браузеров реализовано свойство overflow-wrap. В проекте спецификации CSS3 указано следующее определение overflow-wrap: Это свойство указывает, может ли браузер разбивать строку на недопустимые точки переноса, чтобы предотвратить переполнение, когда неразрывная строка слишком длинна, чтобы поместиться в границах контейнера.
Если у вас есть свойство white-space для элемента, вам необходимо установить для него значение allow, чтобы разрешить эффект переноса для overflow-wrap. Ниже приведены значения свойства overflow-wrap. Вы также можете использовать глобальные значения inherit, initial, revert и unset для overflow-wrap, но здесь мы не будем их рассматривать.
word — wrap
Свойство word — wrap управляет переносом длинных слов, если они не помещаются в родительский блок.
Пример
Скопировать ссылку "Пример" Скопировано
Пример того, как можно настроить перенос по символам с помощью word — wrap .
p border: 1px solid #fff; ширина: 100px; перенос-слов: разрыв; > p border: 1px solid #fff; ширина: 100px; перенос-слов: разрыв; > Копировать Скопировано Ошибка копирования
Как пишется
Скопировать ссылку "Как пишется" Скопировано
Подсказки
Скопировать ссылку "Подсказки" Скопировано
Если длинное слово не разделено пробелами, оно по умолчанию будет выходить за пределы контейнера.
word-wrap
Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область.
Краткая информация
| normal |
| Да |
| Всех элементов |
| Не используется |
| Нет |
Синтаксис
word-wrap: normal break-word
Синтаксис
| Обозначает тип параметра. | ||
| A B | Порядок вывода значений должен соответствовать указанному. | |
| A B | Указывает на необходимость выбора только одного варианта из представленных (A или B). | normal small-caps |
| A B | Каждый параметр можно использовать отдельно или в любой комбинации с другими. | width count |
| [ ] | Создает группу значений. | [ crop cross ] |
| * | Может повторяться ноль или более раз. | [,]* |
| + | Должно повторяться один или более раз. | + |
| ? | Указанное значение, слово или группа не являются обязательными. | inset? |
| Повторения в диапазоне от A до B раз. | ||
| # | Повторение одного или более раз с разделением запятой. | # |
Значения
normal Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью ). break-word Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.
Пример
Результат данного примера показан на рис. 1.
Рис. 1. Перенос длинных слов
Объектная модель
Объект.style.wordWrap
Спецификация
| CSS Text Level 3 | Рабочий проект |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Браузеры
| 5.5 | 12 | 1 | 10.5 | 1 | 3.5 |
| 1 | 4 | 11 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
Данное число обозначает версию браузера, начиная с которой поддерживается данный элемент.
