Welcome to WebmasterWorld Guest from 54.160.131.144

Forum Moderators: not2easy

Message Too Old, No Replies

prevent content from wrapping

<span> tags wrap inside <li>

     

designaweb

8:34 pm on Nov 9, 2010 (gmt 0)

10+ Year Member



Hi,

Got a question.

I've got:

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

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?

Major_Payne

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.

SuzyUK

10:23 am on Nov 10, 2010 (gmt 0)

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



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.

your
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


CSS:
<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;}
</style>

<!--[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 */
</style>
<![endif]-->


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


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;}
 

Featured Threads

Hot Threads This Week

Hot Threads This Month