如何为固定数量的文本行设置元素高度

Question

鉴于一些占用大约10行的文本,如何调整其容器大小以仅显示前3行并隐藏其他行？显然这是有效的,但我认为它不可靠:

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

我可以依赖这个事实,height of one row = 2.5ex或者仅仅是我用来测试的浏览器中的巧合吗？

Answer 1

如果您打算使用它,您应该确保line-height始终是2.5ex

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

万一有人想知道什么是'ex`单位:[css'ex'单位的价值是多少？](http://stackoverflow.com/questions/918612/what-is-the-value-of-所述-CSS-EX-单元) (5认同)

Answer 2

ex单位是字体x-height(x字符的高度).我不会在这里使用它.你应该使用em单位.这是实际的字体高度.通过设置line-height属性来定义font-height.所以:

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