19.01.2022

Полное руководство по word-wrap, overflow-wrap и word-break в CSS

Полное управление по word-wrap, overflow-wrap и word-break в CSS

От создателя: в наши дни очень принципиально сделать сайт адаптивным, чтобы он верно отображался на всех устройствах. К огорчению, несмотря на все усилия, вы все равно сможете получить неработающие макеты. Иногда макеты нарушаются из-за того, что некие слова слишком длинные, чтобы уместиться в контейнере.

Переполнение контента может произойти, когда вы имеете дело с пользовательским контентом, который вы не сможете контролировать. Типичный пример — раздел комментариев в блоге. Как следует, вам необходимо применить соответствующий стиль, чтоб содержимое не переполняло свой контейнер.

Вы сможете использовать свойства CSS word-wrap, overflow-wrap либо word-break для обертывания или переноса слов, которые в неприятном случае переполнили бы их контейнер. Эта статья представляет собой подробное управление по свойствам CSS word-wrap, overflow-wrap и word-break, а также о том, как вы сможете использовать их, чтобы не допустить, чтоб переполнение содержимого разрушало ваш красиво оформленный макет.

До этого чем мы начнем, давайте разберемся, как браузеры переносят контент в последующую секцию.

Как происходит перенос контента в браузерах?

Браузеры делают перенос содержимого в разрешенные брейкпоинты, именуемый «мягкой оберткой». Браузер будет обертывать контент с внедрением мягкой обертки, если таковая возможна, чтоб минимизировать переполнение контента.

В британской и большинстве подобных ей системах письма способности мягкой обертки по умолчанию появляются на границах слов при отсутствии переносов. Так как слова ограничены пробелами и знаками препинания, конкретно здесь используются мягкие обертки.

Несмотря на то что в английских текстах для символов пробела употребляются мягкие обертки, для неанглийских систем письма ситуация может быть другой. Некоторые языки не используют пробелов для разделения слов. Как следует, упаковка содержимого зависит от языка либо системы письма. Значение атрибута 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, но тут мы не будем их рассматривать.

CSS

Ниже мы разглядим значения свойства CSS overflow-wrap, чтобы осознать его поведение.

Normal

Применение значения normal принудит браузер использовать поведение разрыва строки по умолчанию в системе. Потому для английского языка и других схожих системах письма разрывы строк будут происходить через пробелы и дефисы:

CSS

На изображении ниже в тексте есть слово, длина которого превосходит длину контейнера. Поскольку нет возможности мягенького переноса, а значение свойства overflow-wrap равно normal, слово переполняет собственный контейнер. Это является поведением системы при переносе строк по умолчанию.

Полное управление по word-wrap, overflow-wrap и word-break в CSS

Anywhere

Внедрение значения в аnywhere приведет к разрыву неразрывной строчки в произвольных точках между двумя знаками. Аnywhere не будет добавлять символ дефиса, даже если вы примените свойство hyphens к этому элементу.
Браузер порвет слово только в том случае, если отображение слова приведет к переполнению. Если слово вызывает переполнение, оно будет разорвано в точке, где это переполнение вышло.

Когда вы используете аnywhere, браузер будет учесть возможности мягкого переноса, предоставляемые разрывом слова, при вычислении внутренних размеров min-content:

CSS

В отличие от предшествующего примера, где мы использовали overflow-wrap: normal, на изображении ниже мы используем overflow-wrap :where. Слово-переполнение, которое нереально разбить, разбивается на фрагменты текста с помощью overflow-wrap: anywhere, чтоб оно поместилось в своем контейнере.

Полное управление по word-wrap, overflow-wrap и word-break в CSS

Значение anywhere не поддерживается некими браузерами. На изображении ниже показана помощь браузерами по данным caniuse.com. Потому не рекомендуется использовать overflow-wrap: anywhere, если вы желаете иметь более высокую поддержку браузера.

Полное управление по word-wrap, overflow-wrap и word-break в CSS

Break-word

Значение break-word похоже на хоть какое другое с точки зрения функциональности. Если браузер может перенести слово без переполнения, то он это сделает. Но, если слово все еще переполняет контейнер, даже когда оно находится в новейшей строке, браузер разделит его в точке, где опять произошло бы переполнение:

CSS

На изображении ниже показано, как браузер прерывает переполненный текст в прошлом разделе, когда вы применяете overflow-wrap: break-word. Вы заметите, что изображение ниже смотрится так же, как изображение в последнем примере. Разница меж overflow-wrap: anywhere и overflow-wrap: break-word заключается в вычислении внутренних размеров min-content.

Полное управление по word-wrap, overflow-wrap и word-break в CSS

Разница меж anywhere и break-word очевидна при вычислении внутренних размеров min-content. С break-word браузер не учитывает способности мягкого переноса, предоставляемые разрывом слова, при вычислении внутренних размеров min-content, но он учитывает способности мягкого переноса при использовании anywhere.

Значение break-word имеет достойный охват посреди последних версий десктопных браузеров. К огорчению, этого нельзя сказать об их мобильном аналоге. Потому безопаснее использовать унаследованный word-wrap: break-word заместо более нового overflow-wrap: break-word.

На изображении ниже показана помощь браузеров overflow-wrap: break-word согласно caniuse.com. Вы заметите, что последние версии десктопных браузеров имеют поддержку, в то время как помощь некоторых мобильных браузеров неизвестна.

Полное управление по word-wrap, overflow-wrap и word-break в CSS

Свойство Word-break

Word-break — еще одно свойство CSS, которое вы сможете использовать для указания возможности мягкого переноса меж символами. Вы можете использовать это свойство, чтоб разбить слово в том месте, где могло произойти переполнение, и перенести его на последующую строку.

Ниже приводится то, что сказано о свойстве CSS word-break в спецификации CSS3:

Это свойство определяет способности мягкого переноса между буквами, то есть там, где это «нормально» и допустимо для разрывов строк текста. Word-break держит под контролем, какие типы букв браузер может соединять воединыжды в неразрывные «слова», заставляя символы CJK вести себя как текст, не относящийся к CJK, либо наоборот.

Ниже приведены вероятные значения CSS-свойства word-break. Как и для overflow-wrap, вы также сможете использовать глобальные значения inherit, initial, revert и unset, но мы не будем рассматривать их тут:

CSS

Break-word также является значением для CSS-свойства word-break, несмотря на то что оно устарело. Однако, браузеры по-прежнему поддерживают его. Указание этого характеристики имеет тот же эффект, что и word-break: normal и overflow-wrap :where.

Сейчас, когда мы знакомы с CSS-свойством break-word и надлежащими ему значениями, давайте подробно рассмотрим их.

Normal

Установка для характеристики word-break значение normal будет применять правила разбиения по словам по умолчанию:

CSS

На изображении ниже показано, что происходит, когда вы применяете стиль word-break: normal к блоку текста, который содержит слово длиннее, чем его контейнер. Вы видите, что в браузере действуют обыденные правила разбиения на слова.

Полное управление по word-wrap, overflow-wrap и word-break в CSS

Break-all

Значение break-all воткнет разрыв строки именно в том месте, где текст переполнился бы для некитайских, неяпонских и некорейских систем письма. Слово не будет помещено в отдельную строчку, даже если это предотвратит необходимость вставки разрыва строчки:

CSS

На изображении ниже я применил стиль word-break:break-all к элементу p шириной 240 пикселей, содержащему переполненный текст. Браузер воткнул разрыв строки в точке, где могло произойти переполнение, и перенес оставшийся текст в последующую строку.

Полное управление по word-wrap, overflow-wrap и word-break в CSS

Внедрение break-all приведет к разрыву слова меж двумя символами именно в том месте, где произойдет переполнение в британском и других родственных языковых системах. Но это не применимо к текстам на китайском, японском и корейском языках (CJK).

Он не применяет то же поведение к текстам CJK, поэтому что системы письма CJK имеют свои собственные правила для внедрения брейкпоинтов. Создание разрыва строки между 2-мя символами произвольно во избежание переполнения может существенно изменить общий смысл текста. Для систем CJK браузер будет использовать разрывы строк в том месте, где такие разрывы разрешены.

На изображении ниже показана помощь браузером word-break: break-word согласно caniuse.com. Несмотря на то что последние версии современных веб-браузеров поддерживают это значение, помощь среди некоторых мобильных браузеров неизвестна.

Полное управление по word-wrap, overflow-wrap и word-break в CSS

Keep-all

Если вы используете значение keep-all, браузер не будет использовать разрывы слов к текстам CJK, даже если происходит переполнение содержимого. Эффект от внедрения значения keep-all такой же, как и у normal для систем письма, хороших от CJK:

CSS

На изображении ниже применение word-break: keep-all имеет тот же эффект, что и word-break: normal, поэтому что я использую систему письма, хорошую от CJK (английский язык).

Полное управление по word-wrap, overflow-wrap и word-break в CSS

На изображении ниже показана помощь браузером word-break: keep-all согласно caniuse.com. Это значение поддерживается в большинстве фаворитных десктопных браузеров. К сожалению, это не относится к мобильным браузерам.

Полное управление по word-wrap, overflow-wrap и word-break в CSS

Сейчас, когда мы рассмотрели свойства CSS overflow-wrap и word-break, в чем разница меж ними?

В чем разница меж overflow-wrap и разр word-break?

Вы сможете использовать CSS свойства overflow-wrap и word-break для управления переполнением содержимого. Но существуют различия в способах обработки этих 2-ух свойств.

Использование overflow-wrap приведет к переносу всего переполненного слова в новейшую строку, если оно может поместиться в одну строчку, не переполняя свой контейнер. Браузер порвет слово только в том случае, если он не сумеет разместить слово в новой строке без переполнения. В большинстве случаев свойство overflow-wrap либо его устаревшее название word-wrap может быть достаточным для управления переполнением содержимого.

Свойство overflow-wrap относительно новое, потому его поддержка браузером ограничена. Вместо этого вы сможете использовать устаревшее название word-wrap, если вам нужна более высочайшая поддержка браузером.

С другой стороны, word-break свирепо разорвет слово, которое выходит за границы, меж двумя символами, даже если размещение его в новейшей строке устранит необходимость в разрыве слова. Не считая того, некоторые системы письма, такие как системы письма CJK, имеют строгие правила разбиения по словам, которые браузер воспринимает во внимание при создании разрывов строк с помощью word-break.

Заключение

Как указывалось в прошлых разделах, overflow-wrap и word-break во многом идентичны. Вы можете использовать оба из их для управления разрывом строки.

Заглавие overflow-wrap является псевдонимом устаревшего свойства word-wrap. Как следует, вы можете использовать их как взаимозаменяемые. Но стоит отметить, что поддержка браузером нового характеристики overflow-wrap по-прежнему невысока. Вам лучше использовать word-wrap заместо overflow-wrap, если вы хотите почти универсальную поддержку браузера. Согласно проекту спецификации CSS3, браузеры должны продолжать поддерживать word-wrap.

Если вы желаете управлять переполнением содержимого, вам достаточно использовать overflow-wrap либо его устаревшее название word-wrap.

Вы также сможете использовать word-break, чтобы разбить слово меж двумя символами, если слово выходит за пределы собственного контейнера. Как и при overflow-wrap, при использовании word-break необходимо действовать осторожно из-за ограничений в поддержке браузера.

Сейчас, когда вы знаете поведение, связанное с этими 2-мя свойствами, вы можете решить, где и когда их использовать.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *