Дизайнер показывает макет: карточки выровнены идеально, заголовки короткие, описания умещаются в три строки. Ты верстаешь один в один — и всё работает. До первого же обновления контента.
Откуда берётся хрупкость
Реальный кейс: секция «Последние статьи» на блоге. Дизайн строился под короткие английские заголовки. Стоило перевести контент на французский — карточки затрещали по швам. Немецкий добил макет окончательно: длинные составные слова просто не помещаются туда, куда их пытаются запихнуть.
Даже без переводов достаточно того, что пользователь увеличит системный размер шрифта — а это стандартная практика среди людей с плохим зрением или усталостью глаз.
Как выглядит «решение», которое маскирует проблему
Типичный код для таких карточек:
.card__title {
margin: 0 0 8px;
font-size: 18px;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card__excerpt {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
overflow: hidden прячет симптом, но не лечит болезнь. Как только убираешь его, содержимое начинает вылезать за пределы контейнера — описания наезжают на теги, элементы перекрываются. Всё это время давление внутри карточки никуда не девалось, просто было скрыто.
Браузер не считает переполнение проблемой — он просто разрешает конфликт единственным доступным способом: обрезает или позволяет контенту вытечь наружу.
Абсолютное позиционирование как соучастник
Фиксированная высота — не единственный виновник. Кнопки действий внизу карточки часто вешают на position: absolute:
.card__actions {
position: absolute;
inset: 0 14px 14px;
}
Выглядит чисто: кнопки всегда прибиты к низу. Но абсолютно позиционированные элементы выпадают из потока и не участвуют в формировании высоты родителя. Чтобы компенсировать это, добавляют отступ вручную:
.card__body {
padding-block-end: 14px;
}
Это грубая оценка. Стоит кнопкам перенестись на вторую строку из-за длинного текста или увеличившегося шрифта — оценка перестаёт работать.
Первый шаг к исправлению
Убери position: absolute у блока с действиями и позволь браузеру самому считать нужное пространство. Изменение небольшое, но поведение меняется ощутимо: внутреннее давление в карточке снижается, потому что верстка перестаёт работать против себя.
Да, фиксированная высота при этом никуда не уходит — это лишь первый шаг. Но уже он показывает главное: проблема не в одном свойстве, а в наборе взаимозависимых допущений, каждое из которых кажется разумным по отдельности.
Карточки фиксированной высоты — это ставка на то, что контент не изменится, язык останется тем же, а пользователи не тронут системные настройки шрифта. Это три допущения, каждое из которых может не сработать независимо от остальных. 🦆