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

правити

Переглядачі

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

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

Переглядач
	1	7	1.3	11	12	6

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

Переглядач
	4.4	18	7	1

Приклади

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

<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; }

<p>лише text-overflow</p>
<div class="line broken">Дуже довгий заголовок новини, який точно не вміститься у відведену йому ширину блока</div>

<p>overflow + white-space + text-overflow</p>
<div class="line ok" title="Дуже довгий заголовок новини, який точно не вміститься у відведену йому ширину блока">Дуже довгий заголовок новини, який точно не вміститься у відведену йому ширину блока</div>

.line {
    width: 260px;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    border: 1px solid #888;
}

.broken {
    text-overflow: ellipsis;   /* самотою — жодного ефекту */
}

.ok {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

<p>Вибери потрібне значення для <code>text-overflow</code>:</p>

<div class="inputs">
  <input id="clip" checked name="text-overflow" type="radio"/>
  <label for="clip">clip</label>
  <message for="clip">Зайвий текст буде обрізано.</message>
  
  <input id="ellipsis" name="text-overflow" type="radio"/>
  <label for="ellipsis">ellipsis</label>
  <message for="ellipsis">Зайвий текст буде обрізано, а до кінця рядка додано три крапки.</message>
  
</div>

<p id="message">Зайвий текст буде обрізано.</p>

<hr>

<div id="block">
  Це просто дуууууже довгий рядочок.
</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  background: yellow;
	font-family: monospace;
	padding: 4px;
	color: #222;
  white-space: nowrap; 
  overflow: hidden;
	width: 16em; 
  text-overflow: clip;
}

#text {
  height: 60px;
  background-color: #eee;
  padding: 16px 0;
}

message {
  display: none;
}

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  document.querySelectorAll('#message').forEach((n) => n.textContent = messageText?.textContent ?? '');

  var newVal = null;
  if (this.id != 'string') {
    newVal = this.id;
  } else {
    newVal = '"' + this.value + '"';
  }

  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('text-overflow', newVal));

}));

<p>Це звичайний рядок тексту:</p>

<p class="example">
  Це просто дуууууже довгий рядочок.
</p>

<p>Тут ми обмежили ширину рядка:</p>

<p class="example hidden">
  Це просто дуууууже довгий рядочок.
</p>

<p>А тут ми застосували властивість <code>text-overflow: ellipsis;</code>,<br>щоб користувач знав, що вміст не закінчений:</p>

<p class="example hidden ell">
  Це просто дуууууже довгий рядочок.
</p>

body {
	font-size: 17px;
	font-family: sans-serif;
	color: #444;
}

p {
  white-space: nowrap; 
}

.example {
	background: yellow;
	font-family: monospace;
	padding: 4px;
	color: #222;
}

.hidden {
	overflow: hidden;
	width: 16em; 
}

.ell {
	text-overflow: ellipsis;
}