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.
