Айдегин - блог Tilda-вебмастера

Как сделать заголовок в карточке товара в одну строку

tilda
Иногда для приятного внешнего вида страницы, нужно чтобы элементы карточек были на одной высоте. В Tilda есть настройка, чтобы выравнивать кнопки по низу. Недавно добавили возможность для некоторых блоков категории Магазин сокращать заголовки до одной строки. С моим кодом вы сможете в любом блоке сокращать информацию.
Заголовок (наименование товара) для блоков из категории Магазин.
Добавьте код в блоке Т123
.t-store__card__title {
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    -ms-line-clamp: 1;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    display: -webkit-box;
    display: box;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    box-orient: vertical;
}
Описание товара в 3 строки
Добавьте код в блоке Т123
.js-store-prod-descr {
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    -ms-line-clamp: 3;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    display: -webkit-box;
    display: box;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    box-orient: vertical;
}
text-overflow: ellipsis; - добавляет многоточие в конце строки и включает саму возможность сокращения
line-clamp: 1; - указывает, что мы оставляем только 1 строку; поставите 2 - будет 2 строки и т.д.
overflow: hidden; - скрывает ненужное

Made on
Tilda