css - CSS空白级联不正确？

Question

我有以下基本结构：

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

这个CSS：

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

这个想法是每个孩子<div>都是一个可以通过水平滚动显示的“页面”。

然而，尽管元素确实并排出现，但其中的文本似乎仍然受到 的影响nowrap，尽管normal应该影响它们（并且根据检查员的说法，正在影响它们）。

我已经在 IE9（white-space正常工作）和 Chrome 23（white-space仍然nowrap）中进行了测试。

是否有解决方法，或者 Chrome 中是否存在（严重）错误？

Answer 1

看起来它在这里的小提琴中工作正常。

我的小提琴包含您的示例，其中包含一些 lorem ipsum 来填写：

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%;
}

正如您在下面的屏幕截图中看到的那样，空白已正确设置为normal.