CSS-свойство text-overflow определяет, как будет отображаться текстовое содержимое, когда оно выходит за рамки контейнера для которого overflow установлен НЕ visible.

Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие.

Значение по умолчанию: clip
Применяется к: Блочные элементы
Наследование: Нет
Анимирование: Нет. Анимируемые свойства
Версия: Новый в CSS3

Текстовый контейнер может быть переполнен, если в нем запрещено переносить слова, например, если white-space установлен nowrap для содержимого или одно из слов слишком длинное, чтобы уместиться.

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

text-overflow: clip | ellipsis | string | initial | inherit

Примеры написания кода свойства text-overflow:

p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
clip Обрезает текст в соответствии с доступным размером контейнера.
ellipsis Добавляет символ многоточия («…», U+2026), визуально показывая, что текст обрезан в этом месте.
string Установка этого значения обрезает текст, если для его отображения недостаточно места.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента text-overflow.

Поддержка браузеров

Свойство text-overflow поддерживается во всех основных браузерах.

Internet Explorer поддерживает префиксную версию -ms-text-overflow, которая может использоваться как синоним text-overflow. Opera 9 и 10 поддерживают версию с префиксом -o-text-overflow.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.