Как вписать текст в блок при помощи CSS

Как разметить текст в блоке фиксированной ширины и высоты, и чтобы при этом он не выходил за рамки блока. Такое бывает необходимо, когда нужно вывести несколько блоков фиксированного размера, но выводимый в них текст изменяет их размеры. Я столкнулся с таким случаем, когда верстал шаблон для интернет-магазина и нужно было сделать так чтобы все карточки товаров выглядили одинаково.

Пример ДО изменений

css obrezka teksta

Пример ПОСЛЕ изменений

css обрезка текста

В моем случае наименование товара выводилось тегом h5. Для его вписывание в блок применяется следующие стили.

h5 {
    display: -webkit-box; /*задает блочный элемент тегу*/
    -webkit-line-clamp: 3; /*количество строк в блоке*/
    -webkit-box-orient: vertical; /*ориентацию элемента внутри тянущегося бокса*/
    max-width: 200px; /*максимальна длина блока*/
    overflow: hidden; /*обрезает лишний текст*/
    text-overflow: ellipsis; /*ставит многоточие после обрезки текста*/
    height:35px /* высота текстового блока*/
}

Добавить комментарий

Ваш адрес email не будет опубликован.