web-dev-qa-db-ja.com

CSSの行の高さがFirefoxとChrome=

目標：最初の4行をテキストボックスに表示します。

私は JSFiddle Demo をChrome 43.0.2357.132（64-bit）とFirefox 39でテストし、Chrome最初の4行（残りの行は非表示）、Firefoxではline-heightは大きく表示されるため、4行目が切り取られました。

CSSでこれを解決するにはどうすればよいですか？

.txt {
    width:300px;
    height:48px;
    overflow:hidden;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#aaaaaa;
    margin-bottom:2em;
    font-size:0.8em;
}
<div class="txt">
    This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. 
</div>
cssgoogle-chromefirefoxcross-browser
11
basZero

line-height。

line-height: 1.2;

動作例（ JSFiddle ）：

.txt {
    width:300px;
    height:48px;
    overflow:hidden;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#aaaaaa;
    margin-bottom:2em;
    font-size:0.8em;
    line-height: 1.2;
}
<div class="txt">
    This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. 
</div>

Firefoxにはデフォルトのline-height/1.1、ただしChromeにはデフォルトline-height/1.2。

6
Alexander O'Mara

一般に、デフォルトのline-height値はnormalです [〜＃〜] mdn [〜＃〜] は次のように述べています：

normal-ユーザーエージェントによって異なります。デスクトップブラウザ（Firefoxを含む）は、要素のfont-familyに応じて、デフォルト値roughly1.2を使用します。

さまざまなブラウザーからの不一致結果を修正するには、numberまたはlengthまたはpercentageの値を適用するか、font-familyにWebセーフフォントを指定してみてください。

この関連記事もご覧ください- jQuery/CSS：line-height of“ normal” ==？px

.txt {
    width:300px;
    height:47px;
    overflow:hidden;
    border-bottom:1px solid #aaa;
    margin-bottom:2em;
    font-size:0.8em;
    font-family:arial; /*new*/
    line-height:1.2; /*new*/
}
<div class="txt">
    This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. 
</div>
4
Stickers

各ブラウザーには異なるデフォルトのフォントファミリーがあるため、フォントファミリーを指定する必要があります。

.txt {
    width:300px;
    height:48px;
    overflow:hidden;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#aaaaaa;
    margin-bottom:2em;
    font-size:0.8em;
    font-family: tahoma;
}
0
Mouhamad Kawas

行の高さはソリューションの一部にすぎません。

他の回答が述べるように、それはブラウザによって異なり、より一貫性のある値を設定する必要があります。私の提案は、em値を使用することです。

次に、コンテナの高さを行の高さの倍数にする必要があります。したがって、4行の高さのコンテナーが必要で、行の高さが1.2emの場合、コンテナーの高さは4.8em（1.2em x 4行）になります。

.txt {
    width:300px;
    height:4.8em; /*4x the line-height to show 4 lines that are not cropped */
    overflow:hidden;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#aaaaaa;
    margin-bottom:2em;
    font-size:0.8em;
    line-height:1.2em; /* set a relative line height */
}
<div class="txt">
    This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. 
</div>
0
IMI