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?

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