2

私は次の基本的な構造を持っています：

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

それぞれの child<div>は、水平スクロールで表示できる「ページ」であるという考え方です。

ただし、要素は横に並んで表示されますが、要素内のテキストは、要素に影響を与えるはずであるnowrapにもかかわらず、影響を受けているようです (インスペクターによると、要素に影響を与えています)。normal

IE9 (white-space正常に動作) と Chrome 23 (white-spaceそのままnowrap) でテストしました。

これに対する回避策はありますか、それとも Chrome の (重大な) バグですか?

4

1 に答える 1

1

このフィドル here で正常に動作しているようです。

私のフィドルには、記入するためにそこにハックされたいくつかの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ます。

スクリーンショット！

于 2012-12-05T01:07:06.060 に答える