Как исправить эту проблему размера DIV?

Question

Итак, в моем веб-приложении каждый представленный пользователем список имеет предварительный просмотр DIV, который содержит четыре атрибута, связанных с представлением - фотографию, название, цену и категорию. Каждый из этих предварительных DIV должен иметь одинаковую ширину и высоту. Изображения изменяются до фиксированной ширины и высоты, чтобы соответствовать размеру div. Однако, когда заголовок слишком длинный, он переходит к следующей строке, делая DIV больше по высоте, чем другие предварительные DIV. Вот изображение:

Нижняя половина должна выглядеть следующим образом:

Я имею в виду, что, поскольку оба названия и категории находятся на левой они должны быть в их собственный контейнер-контейнер, причем цена плавала сама по себе вправо. Заголовки могут содержать не более 40 символов, поэтому в основном мне нужно выяснить, как лучше всего разместить переменное количество текста и, возможно, заменить текст, который разбивается на следующую строку с помощью многоточия. Как мне это сделать? Любые рекомендации?

Answer 1

попробуйте использовать следующий код, который добавит многоточие (...) всякий раз, когда титул больше, чем это необходимо:

.elem { 
    white-space:nowrap; 
    text-overflow:ellipsis; 
    overflow:hidden; 
}