Перенос слов в CSS

Каскадные стили позволяют управлять переносом слов в выбранном контейнере. Для этих целей служат два свойства — word-wrap и word-break. Работу с ними и небольшие хитрости рассмотрим в данной статье.

Разбивка и перенос длинных слов.

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

overflowed-container-logn-word
[пример 1]

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

Если мы применим к нему дополнительно стиль

то информация, выходящая за границы будет просто обрезана. А нам нужен перенос.

Для указания, что в данном случае нам нужен перенос, воспользуемся word-wrap. По-умолчанию, значение этого свойства — normal, это соответствует случаю в примере 1. Давайте установим для него следующие значение:

overflowed-container-long-wrapped-word
[пример 2]

Так мы достигаем желаемого результата — переноса длинного слова. Перенос выполняется с учетом внутренних отступов (padding).

Перенос слов не по границе слов.

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

breakable-any-words-text
[пример 3]

То как происходит разбивка управляется свойством CSS word-break. В примере 3 его значение установлено по умолчанию, оно соответствует вот такой установке:

Т.е. разбивка текста производится на границе слов. Но мы можем заставить браузер разбивать фразу в любом месте предложения:

breakable-words-text
[пример 4]

Благодаря такой разбивке предложение испытало перенос посреди слова «Constant».

Специальные «непереносимые» пробелы.

Возникают ситуации, когда нужно запретить перенос слов, но и пробелы между словами оставить.

Для этого случая в HTML существует спец символ — Non-breakable-SPace — « ». Если в третьем примере мы заменим все пробелы данным символом, то получим похожую на пример № 1 картинку:

non-breakble-space
[пример 5]

HTML код последнего примера:

Написать комментарий

Мало букафф? Читайте есчо !

Как делаются сайты с адаптивным дизайном?

Апрель 7, 2016 г.

Последний писк браузерной моды - адаптивный дизайн - вызван широким внедрением в быт мощных смартфонов. По количеству ядер процессора, быстродействию и ...

Читать

Эффект, затрудняющий прочтение текста

Август 1, 2018 г.

Этот эффект я увидел на одном сайте, где авторы решили так оригинально бороться с пользователями ад-блокера. Дескать сайт живет за счет рекламы, ...

Читать

 

Комментарии к «Перенос слов в CSS»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: