将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，并且会剪切任何溢出。只要行高和高度相等，就会有一行文本。高度/线高的比例决定了显示的行数。

Answer 2

em单位调整font-size，line-height比例也基于此调整。所以这些就是你想用来“固定”高度的东西。

你想要这个：

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

Example Fiddle.

或者，如果您希望它可能减少到1行，请使用：

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

Example Fiddle.

Answer 3

可能的解决方案是在HTML代码中添加：

<div>
 &nbsp
</div>

这就是你想要的？

另一种方法是添加以下CSS规则：

div {
   padding: value;
}

值必须具有您想要的尺寸，例如10px或2em。

我期待一个答案。

干杯， 利奥