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

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