Как разметить текст в блоке фиксированной ширины и высоты, и чтобы при этом он не выходил за рамки блока. Такое бывает необходимо, когда нужно вывести несколько блоков фиксированного размера, но выводимый в них текст изменяет их размеры. Я столкнулся с таким случаем, когда верстал шаблон для интернет-магазина и нужно было сделать так чтобы все карточки товаров выглядили одинаково.
Пример ДО изменений
Пример ПОСЛЕ изменений
В моем случае наименование товара выводилось тегом h5. Для его вписывание в блок применяется следующие стили.
h5 {
display: -webkit-box; /*задает блочный элемент тегу*/
-webkit-line-clamp: 3; /*количество строк в блоке*/
-webkit-box-orient: vertical; /*ориентацию элемента внутри тянущегося бокса*/
max-width: 200px; /*максимальна длина блока*/
overflow: hidden; /*обрезает лишний текст*/
text-overflow: ellipsis; /*ставит многоточие после обрезки текста*/
height:35px /* высота текстового блока*/
}