White-space: nowrap vs white-space: normal why is the effect on floating elements so big?

Question

Definition from w3c : normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default Play it » nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a
tag is encountered.

So why does it make so much difference in the looks of floated elements?

e.g. compare this:

JsBin with white-space normal showing a nicely aligned layout

<table>
    <thead>
      <tr>
        <th>
          <div style="background-color: lightblue; width: 600px; white-space: normal;">
            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px;float: left;">
              Button
            </span>
            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px;float: none;">
              Button
            </span>
            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px; float:right;">
              Button right
            </span>
            <div style="clear: both" />
        </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr><td>note: white-space is normal here</td></tr>
    </tbody>
  </table>

White this where white-space: nowrap is used

it's the same code as above, only this time white-space: nowrap;

someone got a clue? [EDIT] as people commented they can see no difference, I upload a screenshot of the problematic white-space: nowrap I'm on firefox 10.0.4 white-space: nowrap results in 2 rows in firefox 10.0.4

Why are you doing `white-space: nowrap;` in the first place? It works without it: [little link](http://jsbin.com/ibifoq/28/edit). — Chris, Sep 13 '12 at 13:40
I'm actually not seeing any difference here. Also, you don't have any text that would wrap in the first place. You shouldn't see a difference unless you had text that would normally wrap to another line. — Scrimothy, Sep 13 '12 at 13:42
`white-space: nowrap` is also crucial for using `text-overflow: ellipse` — Scrimothy, Sep 13 '12 at 13:43
@Scrimothy `text-overflow: ellipse;` on an element with floated `div`s inside it? I don't get the point. — Chris, Sep 13 '12 at 13:44
@Abody97, in this case you wouldn't need it. I just threw that in because the overall question was about the differences between `white-space:nowrap` and `white-space:normal`. — Scrimothy, Sep 13 '12 at 14:18
@Scrimothy : That's exactly what I thought! there should be no difference. But: in firefox it displays as 2 rows. I run on firefox 10.0.4 esr. My company does not let me display it in different browsers — Toskan, Sep 13 '12 at 16:12
@Abody97 obviously I was having different problems than you saw :-) basically I want to be able to switch between wrapping of buttons and not wrapping buttons. But work is in progress, and as it seems, that must be a different question. — Toskan, Sep 13 '12 at 16:34
@Toskan this is a bug in firefox and its not been fixed yet(ff38) — Exlord, Jul 07 '15 at 06:10

score 4 · Accepted Answer · answered Sep 13 '12 at 14:37

I somewhat retract my initial comment above. If you have divs floated inside a white-space: nowrap div and your parent div has a fixed width, you would get what I mentioned in my comment. However if your children were either inline or inline-block then those child divs would just keep going beyond the right side overflow (just like what inline text would do). Normally, when you float: left the children reach the end of the parent and wrap onto another line.

Check out this fiddle illustration.

score 4 · Answer 2 · edited May 23 '17 at 12:00

4

white-space: nowrap and float: right is known "bug" of Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=488725

I ask question about right aligned triangle in menu: Align to right "left triangle" in menu element. I prepare fix that uses padding-right, negative margin-left and position: absolute.

edited May 23 '17 at 12:00

Community

1
1

answered Aug 05 '14 at 15:51

gavenkoa

45,285
19
251
303

Chris Stephens · Answer 3 · 2012-11-12T20:12:28.987

2

I wanted to add this http://jsfiddle.net/cstephe/tNHLL/ shows how order also effects this in Firefox 10 atleast I'll check this when i get home on a more current version.

EDIT:This is how it looks locally for me.

enter image description here

 <h2>float first: nowrap / Children: floating blocks</h2>
<div class="wrapper nowrap">
     <div class="inlineBlock floating"></div>
     <div class="inlineBlock floating float-right">r</div>
     <div class="inlineBlock">something</div>

</div>
<div class="clearfix"></div>
<h2>typical order: nowrap / Children: floating blocks</h2>
<div class="wrapper nowrap">
     <div class="inlineBlock floating"></div>

     <div class="inlineBlock">something</div>
    <div class="inlineBlock floating float-right">r</div>
</div>

edited Nov 12 '12 at 20:12

answered Oct 01 '12 at 20:57

Chris Stephens

2,164
2
17
21

seems to look the same in chrome 22 and firefox 10. – Toskan Oct 02 '12 at 13:09
I'll test it out on my home pc but so far I,ve seen the difference in ff10 and mobile safari – Chris Stephens Oct 19 '12 at 12:04
it just looks the same to me in chrome Version 22.0.1229.94 m and ff 10.0.9: what looks different for you? what do you actually mean? – Toskan Oct 22 '12 at 14:48
1

this might be something specific to FF 10.0.10 I keep forgetting to check it from home. I guess the one thing we might be able to get out of this is, if you see some behavior like this changing the order might do it for you, however its a bad situation. – Chris Stephens Nov 12 '12 at 20:14

White-space: nowrap vs white-space: normal why is the effect on floating elements so big?

3 Answers3

Linked