css властивість text-overflow
Властивість text-overflow задає спосіб обрізання тексту, що не помістився в середині елемента.
Ви можете вказати, що для позначення будь-якого прихованого тексту використовується ellipsis "..." або якийсь інший символ.
Якщо в блоку є властивість overflow зі значенням hidden, будь-який текст, який є занадто великим, щоб вміститися у блоці, буде відрізаний. Те ж саме стосується auto або scroll, хоча в таких випадках користувач має можливість прокрутки. У будь-якому випадку, залежно від того, де текст був перерваний користувач може або не може бути бачити його (ту частинку, яка не вмістилася). Ви можете використовувати text-overflow, щоб надати візуальну підказку користувачеві про те, що є більше вмісту, наприклад, символ "...".
Властивість text-overflow впливає тільки на вміст. У цьому випадку його можна використовувати з overflow-x, але не з overflow-y.
У багатьох випадках текст просто перенесеться на наступний рядок. Властивість text-overflow впливає тільки на вміст, який не може бути обрізаний (наприклад, через надто довге слово або коли властивість white-space встановлена на nowrap).
| Нотатка: | Ця властивість працює лише тоді, коли для блоку встановлено властивость |
Синтаксис
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 |
| Переглядач | |||
|---|---|---|---|
| text-overflow | 1.5 |
7.0 |
1.3 |
Мобільних переглядачів ще не додано.
Приклади
Значення у дії
Використання властивості text-overflow
Синтаксис влативості
div {
text-overflow: ellipsis;
}