Название товара на три строки — и кнопки «В корзину» в ряду встают на разной высоте. В JS обрезают по числу символов, но буквы разной ширины: где-то оборвёт на полуслове, где-то не влезет. CSS режет по ширине блока:
/* одна строка */
.title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* три строки */
.desc {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
Одна строка:
nowrap запрещает перенос, hidden прячет хвост, ellipsis дорисовывает многоточие. Несколько строк: -webkit-line-clamp задаёт, сколько оставить; соседние три строки обязательны.На гифке: без обрезки карточки в ряду разной высоты, с обрезкой — ровные.
Однострочному варианту нужна ширина у элемента или родителя. В разметке текст целиком, поиск его найдёт. Префикс -webkit- обязателен: без него line-clamp понимает только Safari 18.2+.
❤️ — если понравился пост
@glo_academy | #snippets