Перенос слов в 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 код последнего примера:

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

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

Делаем эффект параллакса для заднего фона на сайте

Октябрь 19, 2015 г.

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать

Убираем подсветку поля при фокусе ввода в Chrome

Май 18, 2018 г.

В браузерах на движке chromium (Chrome, Opera) по умолчанию есть "подсветка" поля, получившего фокус ввода. Смотрим как убрать данный стиль. Давайте ...

Читать

 

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

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



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