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

问题

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

回答1:

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.

回答2:

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.

回答3:

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.

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

来源：https://stackoverflow.com/questions/12407541/white-space-nowrap-vs-white-space-normal-why-is-the-effect-on-floating-element

标签

css

alignment