如何为固定数量的文本行设置元素高度 [英] How to set element height for a fixed number of lines of text

问题描述

给定一些占据约10行的文本，如何调整其容器大小以仅显示前3行并隐藏其他容器？显然这是可行的，但我认为这是不可靠的：

Given some text that occupies about 10 rows, how can I resize its container to only show the first 3 rows and hide the others? Apparently this works, but I think it is not reliable:

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

我可以依赖

Can I rely on the fact that height of one row = 2.5ex or is that just a coincidence in the browsers I am using to test?

推荐答案

如果你打算使用这个，你应该确保 line-height 总是2.5ex

If you are going to use this you should ensure the line-height is always 2.5ex

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

演示

这篇关于如何为固定数量的文本行设置元素高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！