Добавить разрыв строки, если текст переполняется на 2 строки

Question

У меня есть сайт для электронной коммерции, созданный на .liquid, HTML / CSS и т. Д. ... На странице коллекций / категорий все мои заголовки имеют разную длину (некоторые идут более 2 строк, некоторые более 1 строки).

Проблема в том, что под названием продукта есть образец цвета, цена и звезды обзора, и у меня есть 4 колонки на рабочем столе. Если заголовок действительно длинный, он сбивает с ног элементы образца / цены и просматривает строку, и это не выглядит очень приятным.

Есть ли какой-нибудь способ ЗНАТЬ веб-сайт, если заголовок переполняет строку и еслитогда НЕ добавляйте разрыв строки после заголовка. Таким образом, образцы / цены / обзоры всегда встроены.

Вот скриншот моего сайта и что я имею в виду.

Answer 1

Вы также можете обрезать заголовок, установив max-width и многоточие следующим образом:

title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}