Как обрезать длинную строчку без переноса – CSS

Задача.

Есть каталог товаров, в котором названия товаров разных размеров. Дабы внешний вид был более опрятный, принято решение ограничить название товара в одну строку.

Решение.

Ищем в CSS, к какому стилю привязано отображение данного элемента и просто добавляем наш код в CSS.

.product-thumb h4 a {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

Значение “-webkit-line-clamp” укажет на какой строчке делать обрезку. При желании можно указать три, четыре и любое количество строчек.

Вывод.