所以只能有两种可能。
1) 如果行高是两行之间的高度,那么一行的行高是多少??
2) 如果行高是行高,那么如果我将行高设置为 0,那么应该看不到任何东西,对吗? 但正如您在示例中看到的那样,在 line-height 0 之后内容是可见的。
<!DOCTYPE html>
<html>
<head>
<style>
p {
line-height: 0;
}
</style>
</head>
<body>
<p>
First Line First Line First Line First Line First Line<br>
Second Line Second Line Second Line<br>
Third Line Third Line <br>
</p>
</body>
</html>
那么哪个是正确的?
最佳答案
正确答案是第二个(部分!!):line-height
属性是每个文本行的高度,但是如果行的内容溢出它,这将是没有隐藏是因为默认情况下,html 元素不会 overflow hidden 其容器的内容。
如果您添加 overflow: hidden
,您将有证据证明这一点。
.sampleText {
font-size: 24px;
line-height: 12px;
overflow: hidden;
}
<p class="sampleText">This is a Sample Text!!</p>
如您所见,line-height
是指行的高度,当我们添加 overflow:hidden
时,其余文本被隐藏。如果缺少 overflow:hidden
,文本将具有所有元素的默认 html 属性:overflow:visible
。
如果 line-height
属性值大于 font-size
,文本将垂直居中对齐,如下例所示。
.sampleText {
font-size: 24px;
line-height: 40px;
background-color: sandybrown;
}
<p class="sampleText">This is a Sample Text!!</p>
关于javascript - css中的行高是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42018706/