Учитывая некоторый текст, который занимает около 10 строк, как изменить размер его контейнера, чтобы отображать только первые три строки и скрывать другие? По-видимому, это работает, но я думаю, что это ненадежно:
.container {
height: 7.5ex; /* 2.5ex for each visible line */
overflow: hidden;
}
Можно ли полагаться на то, что height of one row = 2.5ex или это просто совпадение в браузерах, которые я использую для тестирования?
Если вы собираетесь использовать это, вы должны убедиться, что line-height всегда 2.5ex
.container {
line-height: 2.5ex;
height: 7.5ex; /* 2.5ex for each visible line */
overflow: hidden;
}
Экс-единица - это шрифт 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
вы можете установить высоту строки текста и с ней знать точную высоту каждой строки и задавать желаемую высоту вашего контейнера, просто делая это:
.container {
line-height:25px;
height:75px;
overflow:hidden;
}
Теперь все работает правильно:)
Вы можете использовать свойство webkit line-clamp
.container {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
Он не работает во всех браузерах, но, надеюсь, он будет в один прекрасный день.