Ascenders Tops zeigen in fester Höhe div (Überlauf versteckt)

Question

Ich habe eine div genau vier Zeilenhöhen hoch.

Die Oberseiten der Oberlängen der (verborgenen) fünften Zeile werden angezeigt.

Wie kann ich das verhindern?

Ich bin widerwillig, nur das div etwas kürzer zu machen, da dies die Unterseite der Unterlängen in verschiedenen Browser/Plattform abschneiden könnte.

Chrome 53.0 auf Android:

Firefox 49,0 auf Lubuntu:

Quellcode:

div 
 
{ 
 
\t font-size: 22px; 
 

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

 
\t width: 200px; 
 
\t 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 1

height hat 4.8em (das heißt 1,2 * 4)

div 
 
{ 
 
\t font-size: 22px; 
 

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

 
\t width: 200px; 
 
\t 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 2

Nun, können Sie versuchen, Höhe, so viel wie möglich, je nach Ihrer Zeilenhöhe einzustellen.

div 
 
{ 
 
\t font-size: 22px; 
 

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

 
\t width: 200px; 
 
\t 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; 
}