在Html <p>中设置行高,以便在<p>具有不同的字体大小时使html看起来像办公室字

Question

如何在一个html标签中设置行高<p>,当它<p>有两种不同的字体大小？

如果我设置<p style="line-height:120%">.... </p>,那么整个<p>只有一个行高.

但我希望它的行为类似于Microsoft Office Word /(和Google Doc).即:具有不同字体大小的不同内容将具有不同的行高.

是否有可能<p>实现这种效果？或者我必须逐行执行此操作,例如Google Doc？有没有更简单的方法？

Answer 1

实际上,你可以很容易地做到这一点.只需将行高指定为数字:

<p style="line-height:1.5">
    <span style="font-size:12pt">The quick brown fox jumps over the lazy dog.</span><br />
    <span style="font-size:24pt">The quick brown fox jumps over the lazy dog.</span>
</p>

行高CSS属性上下文中数字和百分比之间的差异是数字值由后代元素继承,但首先使用字体大小为当前元素计算百分比值,然后继承此计算值由后代元素组成.

有关line-height属性的更多信息,这确实比初看起来要复杂得多,我建议你看一下这个在线演示.

Answer 2

您可以设置line-height像素而不是百分比。你是这个意思吗？