在Html中设置线条高度< p>当< p>有不同的字体大小 [英] Set line height in Html <p> to make the html looks like a office word when <p> has different font sizes

问题描述

当< p> 时，如何设置一个html标记< p>



如果我设置< p style =line-height：120％> .... < / p> ，那么整个< p> 将只有一个行高。

但是我希望它的行为像Microsoft Office Word /（和Google Doc）。即：具有不同字体大小的不同内容将具有不同的行高。

是否有可能为< p> 为了达到这个效果？或者我必须一行一行地完成这项工作，例如Google Doc？有没有更简单的方法？其实，你可以实现这个很简单的方法。只需将行高指定为数字即可：

 < p style =line-height：1.5> 
< span style =font-size：12pt>快速的棕色狐狸跳过了懒狗。< / span>< br /> 
< span style =font-size：24pt>快速的棕色狐狸跳过懒狗。< / span> 
< / p> 
  

行高CSS属性的上下文中的数字和百分比之间的区别在于数字值由后代元素继承，但是首先使用字体大小为当前元素计算百分比值，然后这个计算值由后代元素继承。

有关行高属性的更多信息，其确实比乍看起来要复杂得多，我建议你看看这个在线演示文稿。

How to set the line height in ONE html tag <p>, when this <p> have two different font sizes?

If I set the <p style="line-height:120%"> .... </p>, then the whole <p> will only have one line height.

But I hope it will behave like the Microsoft Office Word/(and Google Doc). i.e.: different contents with different font sizes will have different line height.

Is it possible for <p> to achieve that effect? Or do I have to do this line by line, like Google Doc? Is there any easier way?

解决方案

Actually, you can achieve this pretty easy. Simply specify the line height as a number:

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

The difference between number and percentage in the context of the line-height CSS property is that the number value is inherited by the descendant elements, but the percentage value is first computed for the current element using its font size and then this computed value is inherited by the descendant elements.

For more information about the line-height property, which indeed is far more complex than it looks like at first glance, I recommend you take a look at this online presentation.

这篇关于在Html中设置线条高度< p>当< p>有不同的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！