Установка высоты в div на несколько строк

Как вы выражаете высоту div как кратное его высоте строки в чистом CSS без жесткого кодирования высоты строки или размера шрифта?

Фон

У меня есть поле (DIV), которое содержит текст состояния. Текст иногда будет охватывать несколько строк и часто нужен только один. Статус обновляется несколько (пять) раз в секунду, и это приводит к тому, что нижняя граница и все под окном "прыгают" вверх и вниз, когда поле меняет размер, чтобы соответствовать его содержимому.

Одним из решений прыжка было бы установить минимальную высоту DIV на высоту двух линий. Текст состояния с более чем двумя строками редок, поэтому допустимая степень прыжка будет приемлемой.

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

Что вызывает вопрос: как выразить высоту как кратную высоте строки? Текст состояния наследует его внешний вид из глобальной таблицы стилей и не знает размер шрифта, семейство, высоту строки или что-то еще.

Half-решение

Я могу использовать элемент em, чтобы выразить высоту, ничего не зная о шрифте, но который все еще оставляет свойство высоты строки, которое также влияет на конечную высоту строки.

В идеале я бы предпочел наследовать высоту строки, но если я переопределю ее на известный множитель, то я могу заставить окно стать ровно на две строки.

.progressStatus
{
    line-height: 1.1;
    height: 2.2em;
}

Это решение достаточно хорошо для моих нужд, но мне любопытно, есть ли лучшее решение, которое не включает javascript.

Ответы

Ответ 1

Невозможно выразить это в CSS.

Текст состояния наследует его внешний вид из глобальной таблицы стилей и не знает размер шрифта, семью, высоту строки или что-то еще.

Это не совсем правильно. Поскольку текст в вашем статусе div наследует его значения для font-size, line-height и т.д. Через каскад, он "знает" их и будет соответствующим образом стилизовать. Проблема в том, что CSS не предлагает способ использования этих значений для вычислений. Они рассматриваются неявно при объявлении новых свойств.

Единственный способ добиться именно того, что вы хотите, - это использовать JavaScript. Я сделал скрипку здесь, используя некоторые jQuery. В моем примере простейшая декларация body действует как предок. Запустите его с различными значениями font-size и line-height в теле CSS.

На практике я бы объединил это с вашим методом как резерв для сценариев, где

  • JavaScript отключен.
  • соответствующий предок line-height указывается как процентное значение (потомки наследуют вычисленное значение), и вы решили изменить свой статус font-size. Пример: Предком font-size является 16px, а его line-height - 120% (~ 19px). Теперь, если вы решите, что ваш статус требует большего внимания и объявит .progressStatus {font-size: 24px;}, он наследует рассчитанный line-height (еще 19px). Таким образом, у вас будет высота строки меньше размера текста. Явное объявление a line-height, как в вашем "половинном решении", предотвращает этот случай.

Ответ 2

div { height: 1em; // that one line, 2em for 2 lines, etc... line-height: 1em; // the height of one text line overflow: hidden; }