Часто буває так, що на сторінці є великий шматок тексту, який потрібно обрізати. Використання 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>

І ось що вийде в результаті:

А це Томмі. Він усім говорить, що його назвали на честь автомата «Томмі ґан», але насправді його назвали в честь знаменитого в 19-му столітті балетного танцюриста.

Якщо текст всередині блоку вміщається в нього, три крапки додаватись не будуть, а сам текст буде відображено як завжди:

Томмі всім говорить, що його назвали на честь автомата «Томмі ґан».
Зверніть увагу: таке рішення працює тільки для тексту в одну строку.

Коменти

Олег

зверніть увагу : у нас кажуть що one row = один рядок

Мария

А есть идеи, как обрезать подобным образом многострочный текст по высоте блока?