text-overflow
Властивість CSS text-overflow
(переповнення текстом) задає те, як користувачів повідомляють про прихований вміст, що переливається через край. Він може бути обрізаний, може бути показана трикрапка ('…
') чи якийсь особливий рядок.
Спробуйте його в дії
Властивість text-overflow
не примушує до жодного переповнення. Щоб змусити текст переливатися через край свого контейнера, треба задати інші властивості CSS: overflow
і white-space
. Наприклад:
overflow: hidden;
white-space: nowrap;
Властивість text-overflow
впливає лише на той вміст, котрий переливається через блоковий контейнер у його рядковому напрямку (не на текст, котрий переливається через нижню рамку, наприклад).
Синтаксис
text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";
/* Глобальні значення */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;
Властивість text-overflow
може бути задана у вигляді одного чи двох значень. Якщо дано одне значення, то воно задає поведінку для кінця рядка (правого кінця для тексту зліва направо, лівого кінця для тексту справа наліво). Якщо дані два значення, то перше з них задає поведінку переповнення зліва рядка, а друге – справа. Ця властивість приймає або значення – ключове слово (clip
або ellipsis
), або значення <string>
.
Значення
clip
(обрізати)Усталене значення цієї властивості. Це ключове слово обріже текст на межі області вмісту, таким чином – обрізання може відбутися посередині символу. Щоб обрізати у проміжку між символами, можна задати
text-overflow
зі значенням порожнього рядка, якщо це підтримується цільовими браузерами:text-overflow: '';
.ellipsis
(трикрапка)Це ключове слово покаже трикрапку (
'…'
,U+2026 HORIZONTAL ELLIPSIS
), що представлятиме обрізаний текст. Трикрапка демонструється всередині області вмісту, зменшуючи кількість показаного тексту. Якщо простору для виведення трикрапки недостатньо, вона обрізається.<string>
<string>
, що буде використовуватись для представлення обрізаного тексту. Рядок виводиться всередині області вмісту, скорочуючи розмір показаного тексту. Якщо простору для виведення самого рядка недостатньо, вона обрізається.
Формальне визначення
Початкове значення | clip |
---|---|
Успадковується | ні |
Обчислене значення | as specified |
Формальний синтаксис
[ clip | ellipsis | <string> ]{1,2}
Приклади
Синтаксис одного значення
Цей приклад демонструє, як застосовуються до абзацу різні значення text-overflow
, для тексту зліва направо і справа наліво.
HTML
<div class="ltr">
<h2>Текст зліва направо</h2>
<pre>clip</pre>
<p class="overflow-clip">
Але щоб ви зрозуміли, звідки виникає це хибне уявлення людей
</p>
<pre>ellipsis</pre>
<p class="overflow-ellipsis">
Але щоб ви зрозуміли, звідки виникає це хибне уявлення людей
</p>
<pre>" [..]"</pre>
<p class="overflow-string">
Але щоб ви зрозуміли, звідки виникає це хибне уявлення людей
</p>
</div>
<div class="rtl">
<h2>Текст справа наліво</h2>
<pre>clip</pre>
<p class="overflow-clip">
Але щоб ви зрозуміли, звідки виникає це хибне уявлення людей
</p>
<pre>ellipsis</pre>
<p class="overflow-ellipsis">
Але щоб ви зрозуміли, звідки виникає це хибне уявлення людей
</p>
<pre>" [..]"</pre>
<p class="overflow-string">
Але щоб ви зрозуміли, звідки виникає це хибне уявлення людей
</p>
</div>
CSS
p {
width: 200px;
border: 1px solid;
padding: 2px 5px;
/* Для text-overflow потрібні обидва правила нижче */
white-space: nowrap;
overflow: hidden;
}
.overflow-clip {
text-overflow: clip;
}
.overflow-ellipsis {
text-overflow: ellipsis;
}
.overflow-string {
text-overflow: " [..]";
}
body {
display: flex;
justify-content: space-around;
}
.ltr > p {
direction: ltr;
}
.rtl > p {
direction: rtl;
}
Результат
Синтаксис двох значень
Цей приклад показує синтаксис text-overflow
зі двома значеннями, з яким можна визначити різну поведінку переповнення на початку і в кінці тексту. Щоб побачити ефект, доводиться прокрутити стрій, аби початок строю також сховався.
HTML
<pre>clip clip</pre>
<p class="overflow-clip-clip">
Але щоб ви зрозуміли, звідки виникає це хибне уявлення людей
</p>
<pre>clip ellipsis</pre>
<p class="overflow-clip-ellipsis">
Але щоб ви зрозуміли, звідки виникає це хибне уявлення людей
</p>
<pre>ellipsis ellipsis</pre>
<p class="overflow-ellipsis-ellipsis">
Але щоб ви зрозуміли, звідки виникає це хибне уявлення людей
</p>
<pre>ellipsis " [..]"</pre>
<p class="overflow-ellipsis-string">
Але щоб ви зрозуміли, звідки виникає це хибне уявлення людей
</p>
CSS
p {
width: 200px;
border: 1px solid;
padding: 2px 5px;
/* Для text-overflow потрібні обидва правила нижче */
white-space: nowrap;
overflow: scroll;
}
.overflow-clip-clip {
text-overflow: clip clip;
}
.overflow-clip-ellipsis {
text-overflow: clip ellipsis;
}
.overflow-ellipsis-ellipsis {
text-overflow: ellipsis ellipsis;
}
.overflow-ellipsis-string {
text-overflow: ellipsis " [..]";
}
JavaScript
// Прокрутити кожний абзац, щоб початок також сховався
const paras = document.querySelectorAll("p");
for (const para of paras) {
para.scroll(100, 0);
}
Результат
Специфікації
Попередня версія цього інтерфейсу досягнула статусу Рекомендації в кандидати. Через потребу прибрати певні можливості, не внесені до групи ризику, статус специфікації знизили до рівня Робочої чернетки, що пояснює, чому браузери реалізували цю властивість без префіксів, але вона не має статусу рекомендації.
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-overflow
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 7 | Internet Explorer Full support 6 | Opera Full support 11 | Safari Full support 1.3 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 7 | Opera Android Full support 11 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
fade()
|
Chrome No support Ні | Edge No support Ні | Firefox No support Ні | Internet Explorer No support Ні | Opera No support Ні | Safari No support Ні | WebView Android No support Ні | Chrome Android No support Ні | Firefox for Android No support Ні | Opera Android No support Ні | Safari on iOS No support Ні | Samsung Internet No support Ні |
fade
|
Chrome No support Ні | Edge No support Ні | Firefox No support Ні | Internet Explorer No support Ні | Opera No support Ні | Safari No support Ні | WebView Android No support Ні | Chrome Android No support Ні | Firefox for Android No support Ні | Opera Android No support Ні | Safari on iOS No support Ні | Samsung Internet No support Ні |
<string>
|
Chrome No support Ні | Edge No support Ні | Firefox Full support 9 | Internet Explorer No support Ні | Opera No support Ні | Safari No support Ні | WebView Android No support Ні | Chrome Android No support Ні | Firefox for Android Full support 9 | Opera Android No support Ні | Safari on iOS No support Ні | Samsung Internet No support Ні |
Two-value syntax
|
Chrome No support Ні | Edge No support Ні | Firefox Full support 9 | Internet Explorer No support Ні | Opera No support Ні | Safari No support Ні | WebView Android No support Ні | Chrome Android No support Ні | Firefox for Android Full support 9 | Opera Android No support Ні | Safari on iOS No support Ні | Samsung Internet No support Ні |
Дивіться також
- Пов'язані властивості CSS:
overflow
,white-space
- Властивості CSS, що контролюють розриви строю в словах:
overflow-wrap
,word-break