Як обрізати текст у 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;
}