Issue with line-height within a paragraph

Question

I am using WordPress and applying a class to a section of post text.

Here is my post text

<p>
    <span class="disclaimer">A really long line of text that covers more than one line.</span>
</p>

Here is my CSS

p > .disclaimer {
    font-size: 50%;
    line-height: 50%;
}

Here is my issue:
The font becomes 50% smaller but the line-height does not. No matter what value I input for line-height it will not size properly. The text shows huge spacing when the line wraps around.

See http://stackoverflow.com/questions/6071987/line-height-as-a-percentage-not-working — Nenad Vracar, Jan 22 '16 at 10:13

Pete · Accepted Answer · 2016-01-22T10:15:48.750

4

You need to put the line-height on the p rather than the span:

p {
  line-height: 50%;
  width:100px; /* for example only*/
}
.disclaimer {
  font-size: 50%;
}

<p><span class="disclaimer">A really long line of text that covers more than one line.</span></p>

edited Jan 22 '16 at 10:15

answered Jan 22 '16 at 10:14

Pete

57,112
28
117
166

2

You beat me too :) But only for note: It's a good practice to use `Unitless Line Heights` [css-triks](https://css-tricks.com/almanac/properties/l/line-height/) , [another link](http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/). So you can try `line-height: 0.5` instead `line-height: 50%;` – pgk Jan 22 '16 at 10:24
1

@pgk, I would have used 0.5 too but as 50% was in the original question, I didn't want to change too much – Pete Jan 22 '16 at 10:28
@Pete - Of course I mentioned this ony to the future readers :). – pgk Jan 22 '16 at 15:24

score 1 · Answer 2 · answered Jan 22 '16 at 10:13

1

try

p > .disclaimer {
font-size: 50%;
line-height: 50%;
display:block;}

answered Jan 22 '16 at 10:13

m0riarty

41
1
7

1

While this can answer the question, it's better to provide some explanations about how this code help. – vard Jan 22 '16 at 11:03
Thank you I appreciate the quick response. – user1488639 Jan 22 '16 at 12:13

score 1 · Answer 3 · edited May 23 '17 at 10:27

1

line-height works differently for inline elements than it does for block elements.

Try display: block; in your span's css, or if you need to use the span as inlined element you can reference here

edited May 23 '17 at 10:27

Community

1
1

answered Jan 22 '16 at 10:17

gmanousaridis

371
5
16

Thank you I appreciate the quick response. – user1488639 Jan 22 '16 at 12:14

Issue with line-height within a paragraph

3 Answers3