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

Question

У меня есть маленький <p> шириной около 140 пикселей рядом с изображением. Всего есть место для четырех строк текста. Первые две строки зарезервированы для заголовка, и есть две строки другой информации.

Я хочу, чтобы заголовок был обрезан, если он занимает более двух строк, иначе он вытолкнет другую информацию из нижней части изображения.

Единственное решение, которое я мог придумать, - создать div высотой в две строки с переполнением на скрытый. Однако, если заголовок содержит только одну строку, он оставляет большой пробел.

Решением может быть Jquery, обычный javascript, CSS или даже PHP (если это возможно).

1010 * ТИА *

Answer 1

Установить заголовок, чтобы он имел max-height из двух строк

Answer 2

Имейте в виду, что свойство max-height не поддерживается в IE6. Кроме того, ограничение размера текстовых полей может вызвать проблемы с доступностью, и, как правило, не рекомендуется.

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