Как установить высоту элемента для фиксированного количества строк текста

Учитывая некоторый текст, который занимает около 10 строк, как изменить размер его контейнера, чтобы отображать только первые три строки и скрывать другие? По-видимому, это работает, но я думаю, что это ненадежно:

.container {
    height: 7.5ex; /* 2.5ex for each visible line */
    overflow: hidden;
}

Можно ли полагаться на то, что height of one row = 2.5ex или это просто совпадение в браузерах, которые я использую для тестирования?

Ответы

Ответ 1

Если вы собираетесь использовать это, вы должны убедиться, что line-height всегда 2.5ex

.container {
  line-height: 2.5ex;
  height: 7.5ex; /* 2.5ex for each visible line */
  overflow: hidden;
}

Демо

Ответ 2

Экс-единица - это шрифт x-height (высота его символа x). Я бы не использовал это здесь. Вы должны использовать модуль em. Это фактическая высота шрифта. Высота шрифта определяется установкой свойства line-height. Итак:

.container {
    height: 3em; /* 1em for each visible line */
    overflow: hidden;
}

Вот еще информация о единицах длины CSS: http://www.w3.org/TR/CSS21/syndata.html#length-units

Ответ 3

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

.container {
    line-height:25px;
    height:75px;
    overflow:hidden;
}

Теперь все работает правильно:)

Ответ 4

Вы можете использовать свойство webkit line-clamp

.container {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}

Он не работает во всех браузерах, но, надеюсь, он будет в один прекрасный день.