Итак, мы подошли к финишной прямой по оформлению текста и в этом уроке мы рассмотрим еще два свойства которые могут вам пригодится при работе с текстом. Данные свойства достаточно редко применяются, но о них все же нужно знать.
Свойство text-overflow
Свойство text-overflow: ; используется для определения области видимости текста в блоке, в ситуации, когда текст полностью не помещается в выделенный блок. Данное свойство может принимать два значения:
- clip - текст будет обрезан по размеру области/блока.
- ellipsis - текст будет обрезан и концу добавится многоточие.
Свойство text-overflow: ; будет работать только в том случае, если для блока установлено свойство overflow: ; с значением auto, scroll или hidden.
И свойство white-space, которому нужно указать значение nowrap запрета переноса строк. В итоге получаем вот такой код.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
Текст обрезается с помощью свойства text-oveflow
</body> </html>
И ниже его стили.
p{
white-space: nowrap; /* Запрещаем перенос строк */
overflow: hidden; /* Обрезаем все, что не помещается в область */
background: #fc0;/* Цвет фона */
padding: 5px; /* Поля вокруг текста */
width: 150px; /*Ширина блока*/
text-overflow: ellipsis; /* Добавляем многоточие */
}
Используя такую структуру кода Вы всегда можете обрезать текст, в зависимости от размера блока.
Свойство text-shadow
Переходим к рассмотрению следующего свойства - это text-shadow. Данное свойство добавляет тень к тексту. Для тени задаются параметры: цвет, смещение относительно надписи и размытие. Также, формируемая тень может иметь разный характер: внутренняя тень текста, тень под текстом и тень вокруг текста.
Для этого свойства используется следующий синтаксис:
text-shadow: none | тень [,тень]* где тень: <�������������������������������
����метры <�сдвиг по x> <�сдвиг по y> являются обязательными, параметр <�радиус размытия>, по умолчанию установлен в 0, является не обязательным параметром и задает размытие той самой тени.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
Текст, которому установлена тень. Свойство text-shadow
</body> </html>
И ниже его стили.
.text-shadow p{
text-shadow: 1px 1px 0 crimson, 3px 8px 18px blue; /* Параметры тени */
color: green; /* Зеленный цвет текста */
font-size: 22px; /* Размер текста */
}
Имейте ввиду, что каждый браузер будет отображать тени по своему, в зависимости от его версии. Данное свойство применяется достаточно редко, поэтому для того, чтобы понять как это, все же, работает, стоит самому поэкспериментировать, меняя данные значения text-shadow:1px 1px 0 crimson, 3px 8px 18px blue;.
Вот мы рассмотрели еще свойства относящиеся к тексту. В Демо показано как каждое из этих свойств работает. На этом все, мы рассмотрели все Основные свойства, которые позволяют нам работать и изменять отображаемый вид текста.
CSS