html - 内联元素的 CSS 行高

Question

是否可以更改段落内的行高？

例如，如果我有一个段落或 div 或标签设置为特定的字体大小和行高，并且需要该文本的最后部分更小，我可以在 p 或 div 内做一个跨度和更改字体大小就好了，但是对行高的任何调整都不起作用。

我知道我可以将跨度更改为 block 或内联 block ，但这样会将文本换行在该段落下。如果可能的话，我想让文本保持内联运行。

示例@ https://jsfiddle.net/fye8bcjx/

p {
  font-size: 18px;
  line-height: 2;
}

span {
  font-size: 12px;
  line-height: 1;
}

---
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
  <span>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
        </span>
</p>

Answer 1

block 容器上的行高(在本例中为 <p> 元素)给出了它包含的行的最小行高。因此，如果您希望较小的文本靠得更近，则需要避免为此设置较大的行高。相反，使用行内元素的行高:

p {
  font-size: 18px;
  line-height: 0;
}

span.primary {
  line-height: 2;
}

span.secondary {
  font-size: 12px;
  line-height: 1;
}

---
<p><span class="primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</span>
  <span class="secondary">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
        </span>
</p>