Paul S Paul S - 1 month ago 7
CSS Question

Ascenders tops showing in fixed height div (overflow hidden)

I have a div exactly four line-heights high.

The tops of ascenders of the (hidden) fifth line are showing.

How can I prevent this?

I am reluctant to just make the div a bit shorter, as this could chop the bottom of the descenders off in different browser/platform.

Chrome 53.0 on Android:

Chrome 53.0 on Android

Firefox 49.0 on Lubuntu:

Firefox 49.0 on Lubuntu

Source code:



div
{
font-size: 22px;

line-height: 1.2em;
height: 5em; /* 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

height has to be 4.8em (i.e. 1.2 * 4)

div
{
	font-size: 22px;

	line-height: 1.2em;
	height: 4.8em;			/* 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>

Comments