Урок 9 із 104
9%
← Назад

Обрізання тексту в CSS

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

Обрізання тексту в CSS

Якщо текст не поміщається всередині елемента, його можна обрізати або додати в кінці трикрапку. Для цього використовується властивість text-overflow.

❗ Важливо:

Властивість text-overflow працює лише разом із white-space: nowrap і overflow: hidden або overflow: auto.

Основний приклад


<div class="box">
Дуже довгий текст, який не поміщається всередині блоку.
</div>

.box {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid black;
}

Значення text-overflow

  • clip — текст просто обрізається.
  • ellipsis — наприкінці додається трикрапка (...).

Практичні завдання

📌 Завдання:
  1. №1. Створіть блок шириною 200px. Забороніть перенесення рядків і переконайтеся, що довгий текст виходить за межі блоку.
  2. №2. Додайте горизонтальну смугу прокручування при переповненні тексту.
  3. №3. Обріжте текст, що виходить за межі блоку.
  4. №4. Додайте трикрапку в кінці обрізаного тексту.
  5. №5. При наведенні миші дозвольте переносити текст на нові рядки та автоматично збільшуйте висоту блоку.
💡 Показати підказку

Для появи трикрапки потрібно одночасно використати white-space: nowrap, overflow: hidden і text-overflow: ellipsis.

✅ Показати відповідь
/* №1 */
.box {
  width: 200px;
  white-space: nowrap;
}

/* №2 */
.box {
  width: 200px;
  white-space: nowrap;
  overflow-x: auto;
}

/* №3 */
.box {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
}

/* №4 */
.box {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* №5 */
.box:hover {
  white-space: normal;
  height: auto;
  overflow: visible;
}