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

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;
}

Demo

Answer 2

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

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

以下是有关CSS长度单位的更多信息：http://www.w3.org/TR/CSS21/syndata.html#length-units

Answer 3

您可以设置文本的行高，并且知道每行的确切高度并设置容器的所需高度，只需执行以下操作：

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

现在一切正常：）

Answer 4

您可以使用webkit属性line-clamp

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

它并不适用于所有浏览器，但希望有一天能够使用。

Answer 5

使用rem：

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