特定文本字符可以更改行高吗？

Question

我有这个代码：

<p style="line-height: 1;overflow: hidden;">blah_blah</p>
<p>blah_blah</p>

<p style="line-height: 1;overflow: hidden;">qypj;,</p>
<p>qypj;,</p>

这导致（注意没有下划线，并剪切字符）：

也就是说，它在 Firefox（Windows 10 上的 66.0.3）中也是如此。其他浏览器似乎呈现下划线。上面的片段运行ner 似乎也可以工作（即使在 Firefox 中），除非你运行它在 "Full page".

这个问题与类似，只是这里没有技巧。 "_"只是一个简单的ASCII字符。

我的问题是哪种行为是正确的。是否允许特定字符更改行高（我认为它只应该与字体相关）？ line-height: 1 不应该暗示它可以完全适合任何文本吗？

我想有些字符是特殊的，例如 "p"、"g"、"j"（可能还有“_”），它们会绘制在它的线下方。仍然是哪种行为是正确的。算不算溢出？

PS：此外，我觉得很有趣 either overflow-x: hidden;overflow-y: visible; 和 overflow-x: visible;overflow-y: hidden; 仍然导致此问题。这对我来说更像是一个真正的错误。

Answer 1

如果我使用 Firefox 中的浏览器工具检查下面的代码片段，带下划线和不带下划线的行之间没有高度差异。唯一的区别是由 line-height 设置引起的：16px 与 line-height: 1，19.2px 与浏览器的默认行高。所以下划线在这里没有区别（Mac 上的 Firefox 66.0.3），并且在两种情况下都可见。

请注意，我将页边距设置为 0 以查看 "pure" 行高没有行之间的距离。另外，我没有指定 font-familiy 设置，所以使用了 p 标签的浏览器默认字体。

我能想到的你所描述的唯一原因是一种非常特殊的字体 dimensions/settings，其中下行字母（即像 p q j 这样延伸到基线以下的字母部分）是 not 在字体定义的行高内。

经过一堆来回评论：我想这可能是由 Windows 和 Mac 上的不同默认（系统）字体引起的。仍然是一个错误，我会说（如果你使用的是默认字体）。

html,
body {
  margin: 0;
  padding: 0;
}

p {
  background: #fb6;
  margin: 0px;
}

<p style="line-height: 1;overflow: hidden;">blah_plah</p>
<p style="line-height: 1;overflow: hidden;">blah plah</p>
<p>blah_plah</p>
<p>blah plah</p>

Answer 2

如果没有特别说明，default line-height（取决于字体系列）在大多数浏览器中约为 1.2。这包括火狐。

这可以解释为什么当行高设置为 1 时下划线在 FireFox 中不显示 - 行的底部被截断了。所以我不认为这完全与字体有关（尽管这确实有所贡献），但也与浏览器默认值有关。

有些字体比其他字体大，即使看起来是 "same" 字体大小（正如我确定您在输入文档时看到的，例如 Georgia vs Times new Roman/Baskerville；所以你不能保证文本总是显示在指定的行高 1（或 1.2）上。但是有一些方法可以以像素为单位测量字体

希望对您有所帮助

Answer 3

My question is which behavior is the correct one.

所有这些都是正确的，因为我们在所有浏览器中都没有相同的默认字体，而且根据 OS。

Is specific character allowed to change line height (I thought it was only supposed to be font dependent)?

字符没有改变line-height。更准确地说，line-height 是一个属性，只能通过设置 line-height 来更改，但您可能会混淆由 line-height 和单凭性格无法改变它。

Shouldn't line-height: 1 imply it can fit exactly any text?

不一定，line-height:1表示行框将等于1xfont-size¹但字体设计为包含所有字符这个space？可能他们中的大多数都可以，但我们不知道。

基本上，您需要考虑两件事。 内容区域由字体属性定义，行框由行高定义。我们无法控制第一个，我们只能控制第二个。

这里有一个基本的例子来说明：

span {
 background:red;
 color:#fff;
 font-size:20px;
 font-family:monospace;
}

body {
 margin:10px 0;
 border-top:1px solid;
 border-bottom:1px solid;
 animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {
    line-height:0.2
  }
  
  to {
    line-height:2
  }
}

<span >
blah_blah
</span>

红色是我们的内容区域，它的高度由字体属性定义，如果您检查该元素，您会看到它的高度等于 23px（不像 20px =28=]) 和边框定义了我们使用行高控制的行框。

因此，如果 line-height 等于 1，我们将有一个等于 20px 的行框，它不足以包含内容区域的 23px，因此它将得到被截断了，我们可能会隐藏一些合乎逻辑的字符（或其中的一部分）：

span {
  background: red;
  color: #fff;
  font-size: 20px;
  font-family: monospace;
}

body {
  margin: 5px;
  line-height: 1;
  overflow:hidden;
}

html {
 overflow:auto;
}

<span>
blah_blah ÂÄ j p
</span>

不同的 font-size 将删除 Firefox 中的下划线：

span {
  background: red;
  color: #fff;
  font-size: 26px;
  font-family: monospace;
}

body {
  margin: 5px;
  line-height: 1;
  overflow:hidden;
}

html {
 overflow:auto;
}

<span>
blah_blah ÂÄ j p
</span>

另一个使用 Google 字体的例子，结果应该是相同的跨浏览器。下划线可见，但 ^/¨

不可见

span {
  background: red;
  color: #fff;
  font-size: 26px;
  font-family: 'Gugi', cursive;

}

body {
  margin: 5px;
  line-height: 1;
  overflow:hidden;
}

html {
 overflow:auto;
}

<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">
<span>
blah_blah ÂÄ j p
</span>

另一个下划线不可见的例子：

span {
  background: red;
  color: #fff;
  font-size: 27px;
  font-family: 'PT Sans', sans-serif;

}

body {
  margin: 5px;
  line-height: 1;
  overflow:hidden;
}

html {
 overflow:auto;
}

<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<span>
blah_blah ÂÄ j p
</span>

你可以清楚地看到每次我们使用不同的字体时都会出现不同的溢出，这证实了这是字体相关的。除非我们知道字体是如何设计的，否则我们无法控制它。

特定文本字符可以更改行高吗？

Can specific text character change the line height?

html

css

overflow

font-size