Geek Answers Handbook

Set the line height in html <p> so that html looks like an office word when <p> has different font sizes

How to set line height in one html tag <p>if this one <p>has two different font sizes?

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

But I hope it behaves like Microsoft Office Word / (and Google Doc). that is, different content with different font sizes will have different line heights.

Is it possible to <p>achieve this effect? Or do I need to do this line by line, like Google Doc? Is there an easier way?

+5
source share
3

, . :

<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, , , this -.

+7

line-height . , ?

+1

I found that in my code when I used ration or percentage for row-height line-height;1.5;

My page will scale so that the lowercase font and the uppercase font occupy different page heights (IE All caps take up more space than all below). Usually I think it looks better, but I had to go to a fixed height line-height:24px;so that I could accurately predict how many pixels each page would occupy with a given number of lines.

0
source

More articles:


All Articles