От автора: в современном мире крайне важно, чтобы сайт был адаптивным и корректно отображался на всех устройствах. К сожалению, даже при всех приложенных усилиях вы можете столкнуться с неработающими макетами. Иногда проблемы с макетом возникают из-за того, что некоторые слова оказываются слишком длинными для своего контейнера.
Переполнение контента может случиться, когда вы сталкиваетесь с пользовательским контентом, который не поддается вашему контролю. Примером этого может служить раздел комментариев на блоге. В связи с этим вам потребуется использовать соответствующий стиль, чтобы избежать переполнения содержимого контейнера.
Свойства 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; width: 100px; word-wrap: break-word;> p border: 1px solid #fff; width: 100px; word-wrap: break-word; > Копировать Копирование прошло успешно Не удалось выполнить копирование
Как пишется
Скопировать ссылку "Как пишется" Скопировано
Подсказки
Скопировать ссылку "Подсказки" Скопировано
В современных условиях длинное слово без пробелов будет превышать ширину контейнера, если его не разделить.
