Bert Coules Posted December 10, 2014 Share Posted December 10, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted December 10, 2014 Share Posted December 10, 2014 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; Link to comment Share on other sites More sharing options...
Bert Coules Posted December 10, 2014 Author Share Posted December 10, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted December 10, 2014 Share Posted December 10, 2014 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. Link to comment Share on other sites More sharing options...
Bert Coules Posted December 10, 2014 Author Share Posted December 10, 2014 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. Link to comment Share on other sites More sharing options...
Ingolme Posted December 10, 2014 Share Posted December 10, 2014 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). Link to comment Share on other sites More sharing options...
tejasamrute Posted December 12, 2014 Share Posted December 12, 2014 have you tried this? li:nth-child(3) { line-height: padding: } Please check browser compatibility Link to comment Share on other sites More sharing options...
Bert Coules Posted December 12, 2014 Author Share Posted December 12, 2014 Ingolme, your suggestion worked perfectly. Thanks. Tezzo, thanks for your idea: I'll try it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now