目标:仅在文本框中显示前四行。
我测试了JSFiddle Demo使用 Chrome 43.0.2357.132(64 位)和 Firefox 39,在 Chrome 中,文本框完美显示前 4 行(其余行被隐藏),而在 Firefox 中,line-height
显得更大,因此第四行被截断了。
如何使用 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>
最佳答案
您可以显式设置 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
.
关于Firefox 和 Chrome 中的 CSS 行高不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31386307/