homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

prevent content from wrapping
<span> tags wrap inside <li>

10+ Year Member

Msg#: 4228588 posted 8:34 pm on Nov 9, 2010 (gmt 0)


Got a question.

I've got:

<div class="one">...</div>
<div class="two">...</div>
<span class="three">...</span>
<span class="four">...</span>

All elements within the <li> are set to "float: left". It all works fine, until the 4 elements total width exceed the width of the <li>.

What I need is to prevent wrapping(?) Right now the 4th element (<span class="four">) is shown below the other 3 elements. I don't care if the full contents of this element are shown, so I tried the following:

li {
white-space: nowrap;
overflow-x: hidden;

However, this does not make the last element appear next to the other three, it just stays where it is...

Any ideas?



Msg#: 4228588 posted 10:45 pm on Nov 9, 2010 (gmt 0)

I have never seen any one code a list like that, but you need to post ALL the code you are using for that list. Remember, floating removes that content from the document flow and floats may need to be cleared as some point.


WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4228588 posted 10:23 am on Nov 10, 2010 (gmt 0)

as per Major Paynes reply the code is a little odd, however that doesn't detract from how it could be done as a <li> element can contain any other element. If the four items inside the <li> element of your code are another list then it might be more natural to code them as a nested list, but the "how to" code is the same no matter which way you do it. Best way to decide is to look at it without any CSS applied and see what looks better or more natural.

white-space:nowrap; is the right choice, but as that will only force "white-space" - the white bits between words, or inline elements - not to break, not the space between blocks (your floats) you need to think a bit different. Another clue that this doesn't appear to be a job for floats is that they will 'wrap' as is their nature, because they will "float" into the available space ;) Float is a fairly stubborn property, there's not much you can do to force a floated element to go against it's nature!

This is a job for inline elements really and if you then want those inline elements to be formatted like a block i.e. to have padding/margin/widths applied it would inline-blocks you're after, either way your white-space/overflow logic should then work

There is a gotcha for IE when using
display: inline-block but it's not insurmountable ;)

Here's some code and while I have coded it as nested lists you would simply replace the
ul.main ul li with ul.main div or ul.main span for it to do the same thing

IE workaround notes:
  • IE needs the display:inline-block; bit set first too so the bit in the main code needs to remain, and also IE8 does use it properly too.
  • The span would not need the IE workaround because inline-block does work properly for inline elements in IE
  • I can't remember which version of IE started to use inline-block properly I only think it was 8 so please test this code in 7 I haven't (have tested 6 & 8) .. it's possible that the conditional comment might need to be applied to LT IE 7

<style type="text/css" media="screen">
ul.main, ul.main ul {margin: 0; padding: 0; list-style: none;}
ul.main {width: 500px; padding: 0 0 0 10px; background: #ffc;}
ul.main li {white-space: nowrap; overflow: hidden;}
ul.main ul li {display: inline-block; margin: 10px 0;}

<!--[if LT IE 8]>
<style type="text/css" media="screen">
ul.main ul li {display: inline;} /* to make lesser IE versions display block elements as an inline-block; but still needs inline-block set earlier in the code */

<ul class="main">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>

Note: if you don't need your "side by side" elements to have padding, widths, or margins then simply setting them to
display: inline;- with no need for the extra IE workaround should also work
e.g. in my code
ul.main ul li {display: inline;}
Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved