Variable line heights within a list: is it possible?

[Bert Coules]

I have a list, configured like this:

ul.website_credits_list {    list-style-type: none;    line-height: 2;}

One item is a longer text string than the others, which means that at some narrower screen widths it wraps into two lines:

 

Item one is short. Item two is short. Item three is a bit longer and therefore spills over. Item four is short.I want to set a single instance of line-height: 1 for that longer item, so it appears like this:

 

Item three is a bit longer

and therefore spills over

 

I've tried using span class:

.single_line_height {   line-height: 1}<span class="single_line_height"><li>Item three which is longer and therefore spills over</li></span>

but this affects the spacing above and below the item as well as within it and disrupts the overall look of the list. Alternatively, putting the span tags inside the <li> </li> tags has no effect at all.I'll carry on experimenting and searching, but what is the standard way around this? Many thanks.

Edited December 10, 2014 by Bert Coules

[Ingolme]

You can't put block elements inside a span.

 

Give a class name to your <li> element: <li class="single_line_height">

 

You should use units for your line height:

line-height: 1em;

[Bert Coules]

Ingolme, many thanks for the rapid reply. I'll do as you say. I thought it was OK to express line heights just as numerical values - I can't have made that up, so I must have seen it done that way somewhere - and while it seems to work, I'll certainly add the "em" to the entries.

 

Edited to add:

 

Unfortunately that didn't work: the long line now wraps perfectly with a single line height, but the double line spaces above and below it are now somewhat less than they should be:

 

 

They look like 1.5 line-height to me. It's exactly the same result that I got when I tried putting a span around the <li> </li> tags.

Edited December 10, 2014 by Bert Coules

[Ingolme]

Line-height adds space above and below the text. By setting the line-height to 1em you remove extra space between that element and the ones above and below it.

 

You can add top and bottom padding to compensate. 0.5em of padding on each side should be enough.

[Bert Coules]

I didn't realise that padding could be added to a text string. (In retrospect I suppose it's obvious that it can, but it just never occurred to me for some reason). Thanks very much.

[Ingolme]

The padding is not being added to the text, it's being added to the box surrounding the text.

 

<li> elements are blocks, they are invisible boxes (until you give them a background or border, then they are visible).

[tejasamrute]

have you tried this?

 

li:nth-child(3) {

 

line-height:

padding:

 

}

 

 

Please check browser compatibility

[Bert Coules]

Ingolme, your suggestion worked perfectly. Thanks. Tezzo, thanks for your idea: I'll try it.