Тему отображения текстов мы достаточно глубоко и широко изучали на предыдущих уроках, см урок 07, урок 08, урок 09, урок 10, урок 11, урок 12, урок 13, правда, не выходя за пределы стандарта CSS2.

Cтандарт CSS3 добавляет к предыдущим стандартам такие возможности как эффект отброса текстом тени (text-shadow) и разбивку слова на части (word-wrap).

Начнем с теории вопроса.

Таблица свойств CSS 3. Текстовые эффекты. Text Effects.

NN	Свойство	Гугль Хром	FireFox	IE	Safari	Opera
70	hanging-punctuation	-	-	-	-	-
108	punctuation-trim	-	-	-	-	-
126	text-align-last	-	-	-	-	-
127	text-emphasis	-	-	-	-	-
128	text-height	-	-	-	-	-
129	text-justify	-	-	5	-	-
130	text-outline	-	-	-	-	-
131	text-overflow	4	7	6	3.1	11
132	text-shadow	4	3.5	10	4	9.5
133	text-wrap	-	-	-	-	-
142	word-break	4	15	5.5	3	-
143	word-wrap	4	3.5	5	3.1	10.5

Рассмотрим только те свойства, которые на сегодня имеют практическую ценность и работают во всех браузерах.

Свойство 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; - запрещается раздел между парой знаков.

Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
css_048_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_048_001.zip ← скачайте пример, чтобы установить на свой сайт...