Ascenders顶部显示固定高度div（溢出隐藏）

Question

我的div高度恰好是四行高。

显示（隐藏）第五行的上升部分。

我该如何防止这种情况？

我不愿意让div缩短一点，因为这可能会在不同的浏览器/平台中关闭下降器的底部。

Android上的Chrome 53.0：

Lubuntu上的Firefox 49.0：

源代码：

＆＃13;

＆＃13;

div
{
	font-size: 22px;

	line-height: 1.2em;
	height: 5em;			/* exactly (4 * line-height) */
	overflow: hidden;

	width: 200px;
	background-color: #ccc;
}

＆＃13;

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

height必须是4.8em（即1.2 * 4）

＆＃13;

＆＃13;

div
{
	font-size: 22px;

	line-height: 1.2em;
	height: 4.8em;			/* exactly (4 * line-height) */
	overflow: hidden;

	width: 200px;
	background-color: #ccc;
}

＆＃13;

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

嗯，您可以尝试尽可能多地调整高度，具体取决于您的行高。

div
{
	font-size: 22px;

	line-height: 1.2em;
	height: 4.85em;			/* exactly (4 * line-height) */
	overflow: hidden;

	width: 200px;
	background-color: #ccc;
}

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</div>

Answer 3

div {
    overflow-x: hidden;
}