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

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

示例小提琴。