HTML/CSS Whitespace breaking

Question

I am wondering why with markup like

I get

As you can see, the 1st and last menu items have its link broken into 3 lines even tho theres enough space to expand. Is it possible to have the line not break unless theres really no space? If possible without setting a fixed width or using non-breaking spaces?

Works fine in Opera 11 and IE8. Might be a Firefox bug.

DanMan
– DanMan

2011-01-07 16:43:35 +00:00
Commented Jan 7, 2011 at 16:43 — DanMan
– DanMan, Commented Jan 7, 2011 at 16:43

Habax · Accepted Answer · 2015-12-25 19:00:22Z

3

  HTML entity or white-space: nowrap; CSS. But it won't break even if there is really no space.

You can try using display: inline-block; instead of float: left; for your li, img and / or p.

http://jsfiddle.net/2Mv2E/

edited Dec 25, 2015 at 19:00

answered Jan 7, 2011 at 14:39

Habax

1,37018 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bertine Over a year ago

display: inline-block; doesn't work IE7 or IE6. You would have to use *li { display: inline; } for those browsers to work.

Jiew Meng Over a year ago

white-space: nowrap is not good with when I add max-width the text don't wrap causing the layout to break jsfiddle.net/2Mv2E/1

Diablo · Accepted Answer · 2011-01-07 14:39:49Z

1

Try adding:

li {
    padding: 0;
    margin: 0 3px 0 0;
    float: left;  
    max-width: 120px;
white-space: nowrap;
}

answered Jan 7, 2011 at 14:39

Diablo

3,4181 gold badge24 silver badges28 bronze badges

Comments

jeroen · Accepted Answer · 2011-01-07 15:14:20Z

1

I have no idea why it is behaving like that, but it seems you can fix it by floating the p's as well:

p {
  float: left;
}

Depending on your browser requirements, you can also choose to just float the p right after the image:

img + p {
  float: left;
}

edited Jan 7, 2011 at 15:14

answered Jan 7, 2011 at 15:08

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

Collectives™ on Stack Overflow

HTML/CSS Whitespace breaking

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related