Перенос слов на новую строку

CSS/CSS3

Очень хочется, чтобы текст на веб-страницах вел себя себя так же как в книжках — для разной длины контейнера слова разумно бы располагались в строках.
Существует такое свойство в css, которое позволяет выравнить текст по правому, левому краю, по центру или по всей длине контейнера. Свойство text-align со значением justify как раз и растягивает весь текст по всей ширине колонки.

И всё было бы хорошо, но…при использовании justify при маленькой ширине контейнера в тексте появляются, так называемые, белые пространства и поэтому многие отказывались от использования этого свойство совсем.

Конечно же программисты уже давно задумались над этой проблемой.

Свойство word-break позволяет перенести буквы длинного слова на новую строку, если это слово не влазит в ширину контейнера. Важно, что знак переноса «-» при этом не появляется. Для этого необходимо воспользоваться еще одним свойством hyphens.

Существует очень похожее свойство word-wrap (устаревшее название), оно же overflow-wrap (новое название), которое делает практически то же самое, с минимальными отличиями.

Отличия: если задаем word-wrap: break-word, то слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.

Свойство word-break обладает большим приоритетом, чем word-wrap (overflow-wrap).

Синтаксис

word-break: break-all | keep-all | normal | inherit;

Значения

Значение Описание
break-all Заставляет длинные слова переносится на новую строку, если это слово не помещается в контейнер.
keep-all Для переноса иероглифов.
normal Стандартное поведение: если длинное слово не влазит по ширине в контейнер — оно просто вылезет за его границу (при этом начнется с новой строчки).
inherit Наследует значение родителя.

Значение по умолчанию: normal.

Примеры

Пример 1. Значение normal

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы (при этом начнется с новой строки):

p{width: 200px; word-break: normal; border: 1px solid red;}

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

Пример 2. Значение break-all

А теперь те буквы, которые не помещались, просто перенесутся на следующую строку, а вот слово на новую строку переносится больше не будет:

p{width: 200px; word-break: break-all; border: 1px solid red;}

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

Пример 3. Сравните с word-wrap (overflow-wrap): break-word

В отличие от word-break: break-all, при word-wrap: break-word длинное слово начинается с новой строки:

p{width: 200px; border: 1px solid red; word-wrap: break-word;}

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

Пример 4. Приоритет word-wrap (overflow-wrap) и word-break

Свойство word-break обладает большим приоритетом, чем word-wrap (overflow-wrap). Длинное слово не начинатся с новой строки — это значит, что приоритетнее word-break:

p{width: 200px; border: 1px solid red; word-wrap: break-word; word-break: break-all;}

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

Браузеры

IE Firefox Chrome Opera Safari Android iOS
5.5+ 15.0+ 1.0+ ? 3.1+ 2.0+ 2.0+

Версии CSS

CSS 1 CSS 2.0 CSS 2.1 CSS 3
+
 

 

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