Як обрізати текст у CSS

Привіт:) У цьому пості покажу декілька робочих варіантів, як обрізати (обмежити кількість символів) текст через CSS.

Розгляну 2 випадки: коли потрібно обрізати символи, маючи лише один рядок, а також у блоці із декількома рядками.

Обрізання тексту для одного рядка

Цей варіант підходить, коли потрібно, щоб весь текст був на одній лінії (в одному рядку). Цього можливо досягти, вказавши white-space: nowrap. Якщо текст довгий, а ширина зовнішнього контейнера, наприклад, рівна 200px, тоді текст виходитиме за межі контейнера, хоча й буде залишатися в одному рядку. Щоб його обрізати:

<div class="container">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime optio, explicabo maiores enim odio ab cupiditate sit consequuntur, dolore quas voluptatibus sed iusto necessitatibus at reprehenderit veniam magni aliquam cumque.</p>
</div>
.container {
  width: 200px;
  
  outline: 1px solid red;
}

p {
  width: 150px;
  
  /* Обрізання тексту */
  white-space: nowrap; /* текст в один рядок */
  overflow: hidden; /* приховує все, що виходить за зону контейнера */
  text-overflow: ellipsis; /* замінює прихований текст на трикрапку */
}
до змісту ↑

Обрізання тексту для блоку з декількома рядками

Тут потрібно вказати висоту блоку або елементу, але тут є один нюанс.

Спочатку необхідно порахувати кількість рядків, які потрібно відобразити, а потім помножити це число на значення властивості line-height щоб отримати максимальну висоту блоку. Наприклад, line-height дорівнює 2rem. Тоді якщо потрібно показати 4 рядки, максимальна висота буде 8rem.

max-height: calc(line-height * кількість рядків);

Далі необхідно для властивості display задати значення -webkit-box, щоб увімкнути багатоколонковий режим, та застосувати -webkit-line-clamp, щоб вказати кількість рядків, які потрібно відобразити. Код нижче покаже перші 4 рядки, а весь текст, що залишився, замінить на трикрапку:

<div class="container">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime optio, explicabo maiores enim odio ab cupiditate sit consequuntur, dolore quas voluptatibus sed iusto necessitatibus at reprehenderit veniam magni aliquam cumque.</p>
</div>
.container {
  width: 400px;
  
  outline: 1px solid red;
}

p {
  width: 400px;
  
  /* Обрізання тексту */
  line-height: 2rem;
  max-height: 8rem;
  -webkit-box-orient: vertical;
  display: block;
  display: -webkit-box;
  overflow: hidden!important;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
}

Михайло Петров
Михайло Петров

Мене звати Михайло. Я є WordPress-розробником. Створюю сайти з "нуля", розробляю плагіни, оновлюю наявний функціонал та підтримую готові проєкти.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *