Question

目标：只需在文本框中显示前四行。

我使用Chrome 43.0.2357.132（64位）和Firefox 39测试了JSFiddle Demo，在Chrome中，文本框显示前4行（其余行被隐藏），而在Firefox中line-height看起来更大，因此第四条线被削减了。

我如何用CSS解决这个问题？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以明确设置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。

Answer 2

一般情况下，默认line-height值为normal，在MDN上显示：

normal - 取决于用户代理。桌面浏览器（包括 Firefox）使用默认值粗略 1.2，具体取决于元素的font-family。

要修复不同浏览器的不一致结果，您可以尝试为其应用number或length或percentage值，同时为{{1}指定网络安全字体}。

另见相关帖子 - jQuery/CSS: line-height of “normal” == ?px

font-family

.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*/
}

Answer 3

每个浏览器都有不同的默认字体系列，因此您应指定font-family。

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

Answer 4

行高仅是解决方案的一部分。

正如其他答案所述，它因浏览器而异，您需要设置该值以获得更高的一致性。我的建议是使用em值。

其次，您需要容器的高度为行高的倍数。因此，如果你想要一个4行高且容器行高为1.2em的容器，那么你需要容器高度为4.8em（1.2em x 4行）。

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

Answer 5

您可以使用以下方法为mozilla添加行高代码：

 @-moz-document url-prefix() {
    *,body{
        line-height: as per your requirement;
    }
    }

Firefox和Chrome中的CSS行高不一样

5 个答案:

工作示例（JSFiddle）：