了解不同字体大小的 CSS 换行答案

【问题标题】：Understanding CSS line wrapping with different font-sizes了解不同字体大小的 CSS 换行
【发布时间】：2021-01-18 05:38:09
【问题描述】：

考虑这个例子：

div.big {
  font-size: 2em;
  font-weight: bold;
}

div.big .small {
  font-size: 40%;
}

div.small {
  font-size: 0.8em;
  font-weight: bold;
}

div.small .big {
  font-size: 2rem;
}

<div class="big">Lorem ipsum dolor sit amet, <span class="small">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
<p>Something else</p>

<div class="small"><span class="big">Lorem ipsum dolor sit amet, </span>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<p>Something else</p>

在第一种情况下（较大字体大小的块元素内的小字体大小内联元素），环绕文本周围的间距与第二种情况不同（较小字体内的大字体内联元素）字体大小的块元素）。

多行换行时会更加明显：

导致这种差异的属性/行为是什么，有没有办法在不更改标记的情况下使第一个示例看起来像第二个示例？

【问题讨论】：

@johannes 添加 line-height 标签意味着 OP 知道 line-height 不是这种情况，因此标签会造成混乱
@TemaniAfif 但是 OP 询问“导致这种差异的属性/行为是什么”，这是行高，在这种情况下是浏览器的默认行高。我还在回答中写道，做我演示的事情不是一个好主意......
@Johannes yes 和 line-height 应该在答案中，而不是问题中。询问问题中存在的未知属性是没有意义的。
@TemaniAfif 啊 - 你的意思是我添加的标签 - 抱歉，我错过了。是的，你是对的。

标签： html css fonts font-size

【解决方案1】：

您看到的原因是line-height，默认情况下它是相对于font-size，即相对于父/块元素的font-size。它通常以百分比或像1.6 这样的乘数定义 - 如果您在样式表中没有看到任何此类参数，则仍然存在相应的浏览器默认设置，通常在 1.4 和 1.6 之间。

如果您将 line-height 设置为固定像素值（在现实生活中您几乎不应该这样做），两个示例看起来相同，如下面的代码变体所示：

div.big {
  font-size: 2em;
  font-weight: bold;
  line-height: 16px;
}

div.big .small {
  font-size: 40%;
}

div.small {
  font-size: 0.8em;
  font-weight: bold;
  line-height: 16px;

}

div.small .big {
  font-size: 2rem;
}

<div class="big">Lorem ipsum dolor sit amet, <span class="small">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
<p>Something else</p>

<div class="small"><span class="big">Lorem ipsum dolor sit amet, </span>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<p>Something else</p>

【讨论】：

缩小浏览器宽度时，您的解决方案不起作用...大字符相互重叠。
@MaxiGui 当然可以，因为 line-height 是一个固定的像素值。该示例（也）表明（正如我在回答中所写）您不应该使用它，除非您非常清楚自己在做什么以及可能的后果。

【解决方案2】：

欢迎来到 SO。

只需将display: contents; 添加到

div.big {
  font-size: 2em;
  font-weight: bold;
  display: contents;
}

演示：

div.big {
  font-size: 2em;
  font-weight: bold;
  display: contents;
}

div.big .small {
  font-size: 40%;
}

div.small {
  font-size: 0.8em;
  font-weight: bold;
}

div.small .big {
  font-size: 2rem;
}

<div class="big">Lorem ipsum dolor sit amet, <span class="small">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
<p>Something else</p>

<div class="small"><span class="big">Lorem ipsum dolor sit amet, </span>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<p>Something else</p>

【讨论】：

请注意，这个属性肯定仍然缺乏浏览器支持：caniuse.com/?search=display%3A%20contents%3B
它仍然覆盖全球 90.78%，而且大部分时间只是今天，即不接受它。
这是一个绝妙的技巧。有没有办法在不修改标记的情况下在容器周围添加边距？
可以使用属性:before 和:after 来实现顶部和底部边距。如：div.big:before { content: ''; display: block; margin: 10px;