Перейти к содержанию

text-overflow

Свойство text-overflow определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область.

Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto, scroll или hidden.

Демо

Интерфейс

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
/* Overflow behavior at line end
       Right end if ltr, left end if rtl */
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: '…';
text-overflow: fade;
text-overflow: fade(10px);
text-overflow: fade(5%);

/* Overflow behavior at left end | at right end
       Directionality has no influence */
text-overflow: clip ellipsis;
text-overflow: '…' '…';
text-overflow: fade clip;
text-overflow: fade(10px) fade(10px);
text-overflow: fade(5%) fade(5%);

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: unset;

Значения

clip

Текст обрезается по размеру области.

ellipsis

Текст обрезается и к концу строки добавляется многоточие.

Значение по-умолчанию: clip

Применяется к блочным элементам

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>text-overflow</title>
        <style>
            p.clip {
                white-space: nowrap; /* Запрещаем перенос строк */
                overflow: hidden; /* Обрезаем все, что не помещается в область */
                background: #fc0; /* Цвет фона */
                padding: 5px; /* Поля вокруг текста */
                text-overflow: ellipsis; /* Добавляем многоточие */
            }
        </style>
    </head>
    <body>
        <p class="clip">
            Магнитное поле ничтожно гасит большой круг
            небесной сферы, в таком случае эксцентриситеты и
            наклоны орбит возрастают.
        </p>
    </body>
</html>

Комментарии