2.14. CSS3-текст
В каскадных стилях CSS3-текст существует несколько правил, которые позволят выполнять некоторые важные манипуляции с текстом. Они являются очень полезными при разметке страниц, так как помогают более точно в некоторых ситуациях подогнать «верстку» под psd-макет. Среди них можно выделить:
- обрезание строки;
- внутри словесный перенос;
- внутри строковый перенос.
1. Обрезка строки text-overflow
Это правило позволяет выполнить обрезание некоторого текста, который находится в некотором html-блоке (div, p, li и так далее). Визуально текст становится обрезанным или в конце него добавляется троеточие, сообщающее, что есть продолжение. Чтобы рассматриваемое свойство применялось, необходимо:
- задать ширину html-блока (Например,
width: 100px); - указать
overflow: hidden; - отменить переносы по пробелам и сделать строку неразрывной
white-space: nowrap.
Данное правило является не наследуемым.
| text-overflow | |
|---|---|
| Значения: | |
clip |
Является дефолтным параметром. Задает контейнеру свойство обрезания, при котором за его границу может выходить часть символа. |
ellipsis |
Такой параметр приведет к обрезке текстовой строки и установке в ее конце троеточия (…). |
initial |
Задает html-контейнеру дефолтное значение. |
inherit |
При таком значении текущий html-блок будет наследовать рассматриваемое правило у своего родителя. |
Формат записи
div
{
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}Пример отображения
2. Перенос внутри слов word-break
В ходе разметки текстовых данных на странице документа, если строка визуально не помещается в некоторую область, переход на новую строчку осуществляется по пробелам, дефисам или же принудительно с помощью тэга <br>. Чтобы управлять этим переходом и задавать иные условия, применяется данное css-правило. Оно является наследуемым и не применяется для следующих языковых локализаций:
- китайской;
- японской;
- корейской.
| word-break | |
|---|---|
| Значения: | |
normal |
Является дефолтным параметром. При таком значении отображение текста происходит в соответствии с правилами языка. |
break-all |
Устанавливает возможность разрыва между двумя любыми буквами в слове. |
keep-all |
Устанавливает запрет на разрыв между двумя любыми буквами в слове. |
initial |
Задает html-контейнеру дефолтное значение. |
inherit |
При таком значении текущий html-блок будет наследовать рассматриваемое правило у своего родителя. |
Формат записи
div
{
width: 200px;
word-break: break-all;
}Пример отображения
3. Перенос слов в строке word-wrap
Рассматриваемое правило сообщает браузеру, что при рендеринге длинные слова в тексте текущего блока необходимо переносить при достижении ими его границы. Для срабатывания этого правила у текущего html-контейнера свойство white-space не должно быть равно nowrap. Является наследуемым.
| word-wrap | |
|---|---|
| Значения: | |
normal |
Является дефолтным параметром. Разрывание слов происходит по нормам языковой локали. |
break-word |
Переход на новую строчку и разрыв слова осуществляется при достижении словом границы блока. |
initial |
Задает html-контейнеру дефолтное значение. |
inherit |
При таком значении текущий html-блок будет наследовать рассматриваемое правило у своего родителя. |
Формат записи
div
{
width: 170px;
word-wrap: break-word;
}Пример отображения
Применяя на практике, все описанное выше, Вы сможете управлять визуализацией текстовых данных в соответствии с вашими требованиями. Для повышения своих знаний в области каскадных стилей переходите к следующим по порядку разделам.
Добавить комментарий