固定高さdivで表示されるアセンダーのトップ（オーバーフロー隠し）

Question

divの4つの高さがあります。

（隠れた）5行目のアセンダの上端が表示されています。

どうすればこの問題を防ぐことができますか？

私はdivを少し短くすることには消極的です。これは、異なるブラウザ/プラットフォームでディセンダの底を切り落とす可能性があるためです。

クロームAndroid上で53.0：Lubuntuの

のFirefox 49.0：

ソースコード：

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 4.8em（すなわち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

さて、あなたはあなたの行の高さに応じて、可能な限り高さを調整しようとすることができます。

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