内联元素

Question

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

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

我知道我可以将跨度更改为块或内联块，但随后将该文本包装在该段落下。我希望尽可能保持文本内联运行。

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

＆＃13;

＆＃13;

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

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

＆＃13;

---
<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

块容器上的行高（本例中为<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>

Answer 2

[更新]这个答案确实没有解决OP问题。我会寻找另一种解决方案。

是的，当然。 内联块正是为此而已。它具有块的大多数属性，但就像内联元素一样。

p {
  font-size: 18px;
  line-height: 2;
}
span {
  font-size: 12px;
  line-height: 1;
  display: inline-block; /* <=== Inline block to the rescue. */
}