css властивість 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.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

clip

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

автор: Svitlana

правити

ellipsis

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

автор: Svitlana

правити

string

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
text-overflow	1.0	7.0	1.3	11.0 <br> 9.0 -o-	6.0

Підтримка: мобільні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<div class="dots">Довгий рядок, що не вміщається, закінчиться трьома крапками</div>
<div class="cut">Довгий рядок, що не вміщається, буде просто зрізаний</div>

div {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #ccc;
    margin-bottom: 6px;
}

.dots { text-overflow: ellipsis; }
.cut  { text-overflow: clip; }