0 
HTML

<div class="text-wrapper">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

CSS

.text-wrapper{
width:100px;
height:45px;
overflow:hidden;
float:left;
border:1px solid #CCC;
}

Firefoxでは2行でスムーズに見えますが、chromeまたはie9でページを開くと2行と3行目の上部のように見えます。これを解決するにはどうすればよいですか? スクリーンショット Firefox - Chrome - IE9

Firefox のスクリーンショット クロムのスクリーンショット ie9 スクリーンショット

4

4 に答える 4

0

フォントサイズよりも大きい行の高さを追加できます。要件に応じて同じように調整できます

このコードを確認してください。

.text-wrapper{
width:100px;
height:45px;
overflow:hidden;     
float:left;
line-height:15px;         /*Added line height */
border:1px solid #CCC;
}​

ワーキングデモ

于 2012-12-05T11:18:15.317 に答える
0

font-sizecssに追加します。ブラウザが異なれば、デフォルト値も異なります。CSS reseterまた、ブラウザーの違いのほとんどを削除するために を使用することも検討してください。ここにいいものがあります。

于 2012-12-05T09:24:35.960 に答える
0

line-height:1 と font-size を追加して解決しました

于 2012-12-05T11:10:16.087 に答える
0

柔軟な高さが必要な場合は、以下のように使用します。

.text-wrapper{
width:100px;
height:auto;
overflow:hidden;
float:left;
border:1px solid #CCC;
}

例

于 2012-12-05T09:24:02.743 に答える