Блок с текстом при резиновой верстке. Как задать высоту для ограничения текста?

Question

[Олег Машко]

Добрый день! При резиновой верстке возник вопрос, как сделать блок с текстом растягивающийся в высоту пропорционально ширине. При указании единиц таких как em и rem блок не изменяет своей высоты. Если высоту не указывать вовсе, то текст начинает отображаться весь полностью, который задан в html разметке, какие есть способы для резинового окна с текстом? Спасибо за ответ!

Answer 1

[Артур Мудрик]

Гуглите выражение css padding hack — это как раз то, как сделать высоту блока пропорциональной ширине блока. Вот песочница, я сделал блок с текстом в 2 раза меньше, чем его ширина. Еще для красоты нужно сделать внизу блока градиентную от белого к прозрачному подложку, чтобы текст, который не влезает в блок, красиво пропадал. Ну и еще нужно будет играться с max-width или max-height, иначе проценты всегда будут растягивать блок по высоте.

Comments

[Олег Машко]

Большое спасибо! Благодаря вам, проблема решена!