CSS white-space cascading incorrectly?

Question

I have the following basic structure:

<table>
  <tr>
    <td>
      <div id="root">
        <div>Lots of text here</div>
        <div>Lots more test here</div>
      </div>
    </td>
    <td>I should always be visible</td>
  </tr>
</table>

And this CSS:

#root {
    white-space: nowrap;
    overflow: hidden;
}
#root>div {
    white-space: normal;
    display: inline-block;
    width: 100%;
}

The idea is that each of the child <div>s is a "page" that can be shown by a horizontal scroll.

However, although the elements do appear side-by-side, the text within seems to still be affected by the nowrap, despite the normal that should be affecting them (and according to the Inspector, is affecting them).

I have tested in IE9 (white-space works correctly), and Chrome 23 (white-space remains nowrap).

Is there a workaround for this, or is a (severe) bug in Chrome?

It looks the same to me in IE9(Browser Mode: IE9, Document Mode IE9) and chrome 23 http://jsfiddle.net/mowglisanu/RgbY4/ — Musa, Dec 05 '12 at 00:54

score 1 · Accepted Answer · answered Dec 05 '12 at 01:07

1

It looks like it's working fine in this fiddle here.

My fiddle contains your example with some lorem ipsum hucked in there to fill it out:

html:

<div id="root">
    <div>Lots of text here</div>
    <div>Even more text here... well, in the fiddle it's the exact same text...</div>
</div>

css:

#root {
    white-space: nowrap;
}

#root > div {
    white-space: normal;
    display: inline-block;
    width: 100%;
}

As you can see in the screenshot below, white-space is correctly set to normal.

screenshot!

answered Dec 05 '12 at 01:07

Andbdrew

11,788
4
33
37

I've finally figured out what the difference is between my page and your Fiddle: The `root` element is actually inside a table cell. Try adding `
` and `
` around the `root` element, and you'll see exactly the problem I'm running into. The problem can be half-fixed by adding `table-layout:fixed;width:100%` to the table, but the problem with that is that there are more than just one cell in the actual table and their width is not necessarily known (and I don't want to hard-code them). [This updated Fiddle](http://jsfiddle.net/VTKGC/4/) better shows what's going on – Niet the Dark Absol Dec 05 '12 at 02:35
1

Problem resolved by removing the table. Floating worked fine now even though it wasn't before. Answer accepted as Best Answer (or in this case "only answer" :D) – Niet the Dark Absol Dec 06 '12 at 05:27
@Kolink I ran into this issue as well (Chrome v29) and this was without tables I used ul>li for an inline-block layout. Still trying to figure out a fix... – hitautodestruct Aug 28 '13 at 11:58

CSS white-space cascading incorrectly?

1 Answers1