Курс CSS. Пример 01 урока 48.

Свойство text-overflow для определения способа обрезания длинного текста.

В примерах ниже используется -
white-space:nowrap;
чтобы избежать перехода на новую строку.

text-overflow:clip; - грубое обрезание, как только место заканчивается, текст резко обрезается.

text-overflow:ellipsis; - мягкое обрезание, добавляет троеточие ("..."), чтобы показать пользователю, что текст обрезан.

text-overflow:"...обрыв..."; - можно указать свою строку, которая будет на месте обрезания. В данном примере рискнул использовать для строки обрыва строку на русском языке. Вроде работает, но не удивляйтесь, если ваш браузер вруг как-то глюкнет на таких экспериментах.

Свойство text-shadow для создания эффекта отброса текстом тени (text-shadow).

В стандарте CSS3 есть интересное свойство text-shadow, которое позволяет добиться эффекта отбрасывания текстом тени. Это свойство удобно использовать для заголовков, рекламных призывов и т.п.

Для свойства text-shadow можно определить величину горизонтальной тени, величину вертикальной тени, размер блюра (размытости) и цвет тени.

В данном примере тень смещается на 12 пиклелей по горизонтали, 5 пикселей по вертикали, имеет блюр 2 пикселя и цвет #707070 (т.е. серый, близкий к черному).

Свойство word-wrap дает возможность производить разбивку слова на части.

Рассмотрим два примера. Как видно из этих примеров при использовании свойства word-wrap со значением break-word происходит его разбивка, чтобы текст не выходил за пределы родительского элемента.

Свойство word-break дает возможность производить разбивку слова на части.

Свойство word-break похоже на свойство word-wrap, рассмотренное ранее, но чуть более сложное в использовании.

Рассмотрим три примера. Описания значений свойств:

• word-break: normal; - разделяет слова по из обычным правилам.
• word-break: break-all; - строки могут разделятся между любыми двумя знаками.
• word-break: keep-all; - запрещается раздел между парой знаков.