javascript - css中的行高是什么?

标签 javascript html css

所以只能有两种可能。

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/

相关文章:

html - 如何在特定大小(媒体查询)上切换登录和注册?

html - 在纯 CSS 选项卡菜单中偏移 anchor

javascript - HTML5 <音频>:单击下一首歌曲时停止加载/缓冲

javascript - 如何在我的网站上添加推特推文功能?

Javascript隐藏我选择的div

jquery - 查找鼠标当前指向的 html 元素的 font-family?

html - 如何在不增加 div 大小的情况下在 HTML 中应用填充?

javascript - Edge.js 从 Expandoobject 转换为字符串

javascript - Node CLI 单元测试

jQuery 汉堡菜单没有出现