Как узнать максимально возможную высоту элемента?

Question

[danforth]

Есть элемент, и ему необходимо отображаться в две строки, задаем ему css свойство max-height: 32px.
Как теперь посчитать, какая была бы высота элемента, если бы не было задано свойство max-height? Есть ли какое-то свойство что-то вроде maxUnderlyingHeight?

Сама задача:
Есть список, в котором по умолчанию отображаются только две первых строки. Если количество строк больше двух (>32px) тогда нужно добавить ....

P.S. Нагуглил scrollHeight и clientHeight, но их поведение в некоторых случаях работает не так как нужно (выдает 32 и 33px).

Comments

[danforth]

MaxKorz: добавить необходимо троеточие, а по hover мы делаем max-height: none;
Если строки две или менее - отображаем все.
Если строки три или более - отображаем первые две и вконце троеточие. По hover div с троеточием display: none, а max-height: none;

Answer 1

[Nik Gubin]

Можно воспользоваться неким костылём, но может быть он вам подойдёт:

1. Оборачиваем нужный контент с динамической высотой в контейнер
2. Устанавливаем контейнеру максимальную высоту и overflow:hidden
3. Получаем реальную высоту внутреннего контента, даже если она превышает высоту обёртки

Пример тут: https://jsfiddle.net/Lsybva53/
Клацните по серому блоку и смотрите в консоль.

Comments

[danforth]

Спасибо, помог предложенный "костыль".

Answer 2

[Вячеслав]

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

Comments

[danforth]

Там на самом деле есть div которые содержат в себе span > i. Этот i - иконка 16х16 с цветом. А затем идет ещё один span с символами. Бывает что иконки нету. Бывает что символов нету, одни иконки. И вариаций может быть ну очень много. Всех не предусмотришь.