html-特定文字字符可以更改行高吗

概述我有以下代码：<p style='line-height: 1;overflow: hidden;'>blah_blah</p> <p>blah_blah</p> <p style='line-height: 1;overflow: hidden;'>qypj;,</p> <p&

我有以下代码：

<p >blah_blah</p><p>blah_blah</p><p >qypj;,</p><p>qypj;,</p>

结果是(注意没有下划线和剪切字符)：

也就是说,它在firefox(windows 10上为66.0.3)中具有这种行为.其他浏览器似乎提供了下划线.除非您在“整页”中运行,否则上述代码片段运行器似乎也可以工作(即使在firefox中也是如此).

这个Q类似于Text changes height after adding unicode character,除了这里没有技巧. “ _”只是一个简单的ASCII字符.

我的问题是哪种行为是正确的.
是否允许特定字符更改行高(我认为应该仅取决于字体)？行高不应该：1表示它可以完全适合任何文本吗？

我想一些特殊的字符,例如绘制在其行下方的“ p”,“ g”,“ j”(可能还有“ _”).仍然哪种行为是正确的.是否被认为是溢出？

PS：此外,我觉得它很有趣,要么是overflow-x：隐藏； overflow-y：可见；和overflow-x：可见； overflow-y：隐藏；仍然会导致这种情况.对我来说,这似乎更像是一个实际的错误.

最佳答案

My question is which behavior is the correct one.

所有这些都是正确的,因为我们在所有浏览器中都没有相同的默认字体,并且根据 *** 作系统的不同而有所不同.

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

字符不会更改行高.更准确地说,line-height是只能通过设置line-height来更改的属性,但是您可能会混淆由line-height定义的行框,并且仅字符不能更改它.

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

不一定,line-height：1表示行框将等于1xFont-size 1,但是字体设计为包括该空间内的所有字符吗？他们中的大多数人可能会做,但我们不知道.

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

这是一个基本示例说明：

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(而不是Font-size的20px),边框定义了我们控制的线框使用行高.

因此,如果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>

其他字体大小将删除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>

您可以清楚地看到,每当我们使用不同的字体来确认这与字体相关时,我们就会有不同的溢出.除非我们知道字体的设计方式,否则我们无法控制它.

相关问题：

Understanding CSS2.1 specification regarding height on inline-level boxes

Why is there space between line boxes,not due to half leading?

Line height issue with inline-block elements

这是一篇很好的文章,以获得更准确的细节和计算：https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

本文引述：

It becomes obvIoUs that setting line-height: 1 is a bad practice. I remind you that unitless values are Font-size relative,not content-area relative,and dealing with a virtual-area smaller than the content-area is the origin of many of our problems.

1：我考虑了简化的解释,但实际上,线盒的计算不仅与line-height属性有关.检查以下链接以获得更准确和完整的说明

总结

以上是内存溢出为你收集整理的html-特定文字字符可以更改行高吗 全部内容，希望文章能够帮你解决html-特定文字字符可以更改行高吗 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。