css - 为什么当长文本换行时 CSS 行高不一样？

Question

对于下面的 HTML 和 CSS，为什么第 1 段有空格，而第 2 段或第 3 段没有？行高对它们都是一样的。我该如何修复它，以便所有 3 个段落都有相同的空间？

我在 Chrome 上看到了这个，不确定其他人是否看到了。

.wrapper {
  width: 175px;
  border: 1px solid black;
  font-size: 20pt;
}

.wrapper p {
  margin: 0.5em 0 0 0;
  background-color: orange;
  line-height: 1.2;
  word-wrap: break-word;
}

.wrapper p span {
  display: inline-block;
}

<div class="wrapper">
  <p style="text-align:center"><span style="font-size:0.5em"><span style="color:#00bcd4;">AAAAA &amp; AAAAA</span></span></p>
  <p style="text-align:center"><span style="font-size:0.5em">BBBBB · BBBBB · BBBBB BBBBB BBBBB</span></p>
  <p style="text-align:center"><span style="font-size:0.5em"><span style="color:#00bcd4;">CCCCCCCC &amp; CCCCCCCCCC</span></span></p>
  <p>This is a paragraph without any spans, it needs to look correct too.</p>
</div>

如果这是特定于浏览器的问题的图像:

编辑: 添加了另一个没有任何 span 的 p。这也需要看起来正确。

Answer 1

要解决您的问题，您可以从 html 中的 span 样式属性中删除您的 font-size:0.5em，并放入 .wrapper p 的样式中你的 CSS。

<div class="wrapper">
  <p style="text-align:center"><span style="color:#00bcd4;">AAAAA &amp; AAAAA</span></p>
  <p style="text-align:center"><span>BBBBB · BBBBB · BBBBB BBBBB BBBBB</span></p>
  <p style="text-align:center"><span style="color:#00bcd4;">CCCCCCCC &amp; CCCCCCCCCC</span></p>
</div>
<!-- Also removed the extra spans in the first and third p's, as they would now serve no purpose. -->

.wrapper p {
  margin: 0.5em 0 0 0;
  background-color: orange;
  line-height: 1.2;
  word-wrap: break-word;
  font-size:0.5em; /* This is added */
}

这解决了您的跨度中的字体大小与父元素的字体大小之间的关系。

em 是相对于父级元素的字体大小。 span 的父元素是 p 元素，它继承了 .wrapper 的字体大小，即 20pt .因此，您的 span 的最小高度设置为 10pt，而您的 p 的最小高度设置为 20pt。

之所以存在间隙，是因为你的跨度是 p 大小的一半 (0.5em)，当文本在你的跨度中换行时，它会填充 p 中的剩余空间，这就是为什么其他两个没有间隙的原因.