将div高度限制在其中的两行文本中？

Question

问题是如何将div的高度限制为内部文本的一/二/ n行？

Answer 1

div {
    height: 1em; // that's one line, 2em for 2 lines, etc...
    line-height: 1em; // the height of one text line
    overflow: hidden;
}

这将显示一个高度与当前字体大小相同的div,并且会剪切任何溢出.只要行高和高度相等,就会有一行文本.高度/线高的比例决定了显示的行数.

1em通常小于`line-height:normal`并导致线条挤压在一起.正常的行高值大致计算为1.2,具体取决于浏览器和font-family. (6认同)
另外建议使用 `line-height: 1;` 而不是 `line-height: 1em;`。他们实现了相同的结果，但使用无单位版本可以避免使用“em”潜在的继承怪异。 (2认同)

Answer 2

该em单元通过调整font-size和line-height比例也是基于这一点.所以这些是你想要用来"修复"高度的东西.

你想要这个:

div {
    height: 2.2em;
    line-height: 1.1;
    overflow: auto;
}

或者如果您希望它可能减少到1行,那么使用:

div {
    max-height: 1.1em;
    line-height: 1.1;
    overflow: auto;
}