css властивість text-overflow


Властивість text-overflow задає спосіб обрізання тексту, що не помістився в середині елемента.

Властивість `text-overflow`

Ви можете вказати, що для позначення будь-якого прихованого тексту використовується ellipsis "..." або якийсь інший символ.

Якщо в блоку є властивість overflow зі значенням hidden, будь-який текст, який є занадто великим, щоб вміститися у блоці, буде відрізаний. Те ж саме стосується auto або scroll, хоча в таких випадках користувач має можливість прокрутки. У будь-якому випадку, залежно від того, де текст був перерваний користувач може або не може бути бачити його (ту частинку, яка не вмістилася). Ви можете використовувати text-overflow, щоб надати візуальну підказку користувачеві про те, що є більше вмісту, наприклад, символ "...".

Властивість text-overflow впливає тільки на вміст. У цьому випадку його можна використовувати з overflow-x, але не з overflow-y.

У багатьох випадках текст просто перенесеться на наступний рядок. Властивість text-overflow впливає тільки на вміст, який не може бути обрізаний (наприклад, через надто довге слово або коли властивість white-space встановлена на nowrap).

Нотатка:

Ця властивість працює лише тоді, коли для блоку встановлено властивость overflow як auto чи hidden.

Синтаксис

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

Властивість text-overflow може отримувати 5 значень:

clip

Зайвий текст буде обрізано.

ellipsis

Зайвий текст буде обрізано, а до кінця рядка додано три крапки.

string

Текст, що має побачити користувач, замість обрізаного тексту. Наприклад: "Щоб прочитати це, увійдіть в розділ".

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента.

Значення без задання: clip
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.textOverflow="ellipsis"

Переглядачі

Переглядач
text-overflow

1.0

6.0

7.0

1.3

11.0
9.0 -o-

Переглядач
text-overflow

1.5

7.0

1.3


Мобільних переглядачів ще не додано.

Приклади


Значення у дії

Використання властивості text-overflow

Синтаксис влативості

div { 


  text-overflow: ellipsis; 


} 

Додаткові посилання