Часто буває так, що на сторінці є великий шматок тексту, який потрібно обрізати. Використання overflow: hidden
не завжди допоможе, адже текст може обрізатись навіть посередині букви.
Щоб гарно обрізати шматки тексту, в CSS є властивість text-overflow: ellipsis
, яка дозволяє обрізати строку з довгим текстом, додаючи в конці три крапки ...
.
Для того, щоб таке рішення працювало, треба вказати точну ширину батьківського блоку (наприклад, 100%) і додати кілька параметрів.
Все із вказаного є обов’язковим:
.cut-text { text-overflow: ellipsis; // обрізання довгих блоків з текстом overflow: hidden; // приховати текст, що виходить за межі блоку width: 100%; // ширина блоку з текстом white-space: nowrap; // заборона на перенесення тексту }
Давайте подивимось, як це працює.
<div class="cut-text"> А це Томмі. Він усім говорить, що його назвали на честь автомата «Томмі ґан», але насправді його назвали в честь знаменитого в 19-му столітті балетного танцюриста. </div>
І ось що вийде в результаті:
Якщо текст всередині блоку вміщається в нього, три крапки додаватись не будуть, а сам текст буде відображено як завжди:
Зверніть увагу: таке рішення працює тільки для тексту в одну строку.
зверніть увагу : у нас кажуть що one row = один рядок
А есть идеи, как обрезать подобным образом многострочный текст по высоте блока?