CSS3-текст

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

CSS3-свойства для форматирования текста

• Содержание:
• 1. Обрезка строки text-overflow
• 2. Перенос внутри слов word-break
• 3. Перенос слов в строке word-wrap

1. Обрезка строки text-overflow

Свойство позволяет ограничивать длину текста в случае, когда он не умещается в контейнер, визуально обрезая его или отображая многоточием. Свойство работает только при задании следующих условий: должна быть определена ширина контейнера, элемент должен иметь значения overflow: hidden и white-space: nowrap. Не наследуется.

text-overflow

Значения:
clip	Значение по умолчанию. Текст обрезается в пределе области содержимого, при этом может отобразиться лишь часть символа.
ellipsis	Замещает текст, не уместившийся в блок, с помощью многоточия.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

p {
width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

Рис. 1. Обрезка текста с помощью свойства text-overflow

2. Перенос внутри слов word-break

В обычной ситуации слова переносятся на другую строку в местах пробелов или дефисов («мягкий перенос»), или же в случае принудительного переноса с использованием элемента <br>. Данное свойство позволяет установить правила переноса внутри слов для того, чтобы длинные строки полностью заполняли пространство внутри контейнера. Не используется для CJK-языков (китайский-японский-корейский). Наследуется.

word-break

Значения:
normal	Значение по умолчанию. Текст в контейнере отображается в привычном для нас виде в соответствии с правилами, установленными в языке.
break-all	Пробелы в словах могут быть оформлены между любыми двумя буквами.
keep-all	Запрещает разрывы между парами букв слова.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

p {word-break: normal;}
p {word-break: break-all;}
p {word-break: keep-all;}

3. Перенос слов в строке word-wrap

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

word-wrap

Значения:
normal	Значение по умолчанию. Слова разрываются только по правилам, принятым в языке.
break-word	Разрыв слов и перенос на следующую строку происходит в месте границы контейнера.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

p {word-wrap: normal;}
p {word-wrap: break-word;}