Можно ли обойтись без js — только css — установить высоту заголовков равной максимальному в одном ряду?

Question

[lagudal]

чтобы было понятнее, пару скринов. В двух словах - заголовок - название товара может быть одна, две и т.п. до 5-6 строк в зависимости от разрешения. Необходимо сверстать так, чтобы цена и кнопка в корзину в каждом продукте в одном ряду находились на одной линии. Т.е. если в одном ряду есть продукт с заголовком из 2 строк и продукт с заголовком из 5 строк, то выглядеть все должно как на скрине 1. Если задавать высоту жестко, то в рядах, где нет длинных заголовков, будет появляться много пустого пространства, как на скрине 2. Можно ли как то решить на css? Возможно, что регулирование заголовка не есть верное решение и кто то может предложить лучше?

Answer 1

[Pro_Code]

На флексах можно. Для основного блока - display: flex, flex-direction: column. Для твоего блока(который на картинке красным обведен) - flex-grow: 1.

Comments

[lagudal]

ну так как у меня на флексах и есть - данный подход сработает, если задать фиксированную высоту или заголовка, или же всего описания (заголовок, цена, кнопка).
Но при фиксировании любой из этих величин в тех рядах, где заголовки все короткие, остается много пустого места.

Answer 2

[Spartak (Web-StyleStudio)]

Как вариант(через css запросто):
Можно задать фиксированную высоту заголовку, и если текст не вмещается, то та часть текста которая не вмещается замещается на "...", а при наведении в title показать весь текст.
И будет симметрично

Comments

[lagudal]

Тоже склоняюсь к такому решению - но ограничивать не по высоте заголовка, а с помощью -webkit-line-clamp: 3; например. Поскольку иначе многоточие через псевдоэлементы, да чтобы там где надо только, без костылей не обойтись.
Наверное так и сделаю, подгоню когда выложу в песочницу.

[Spartak (Web-StyleStudio)]

lagudal,

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

[lagudal]

да, именно так я и имел в виду.
Реализовал пока примерно вот так

Есть еще вот такая реализация

В каждом варианте свои плюсы и минусы -
В первом варианте все таки какую то минимальную высоту для текста я задаю, здесь конкретно равную высоте 3 строк. И если в каком-то ряду будут только короткие однострочные тексты, то во всем ряду будет по 2 строки пустого пространства.
Во втором варианте большой плюс, что в каждом ряду высота растягивается по высоте самого длинного текста, и эта высота не переходит на другой ряд. Т.е. видно, что во втором ряду нет длинных текстов и соотв-но нет и пустого пространства.
Однако если я хочу в этом примере тоже ограничить текст по кол-ву строк, и раскрывать по hover. то растягиваться по наведению будут все элементы в ряду, что выглядит не очень.

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

Answer 3

[Евгений]

Flex и вперёд