18

テキストをスクロールするボックスを作成しようとしています。問題は、テキストがボックスの途中にあるときに、テキストが切り取られると予想されるときにボックスの外側に表示されることです。

HTML/CSS は非常にシンプルで、何が問題なのかわかりません。

#vbox {
  width: 100px;
  height: 500px;
  overflow: hidden;
  background: #afa;
}
#vtext {
  position: absolute;
  width: 100px;
  top: 250px;
}
<div id="vbox">
  <div id="vtext">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
    <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
  </div>
</div>

「overflow:hidden;」ではありませんか あふれたコンテンツを隠すことになっていますか？

編集 ：

ボックスに「位置：相対」を追加すると問題は解決しますが、まだ困惑しています...誰かがこの動作を説明できますか?

4

2 に答える 2

22

絶対配置要素はoverflow、その設定を持つ要素がそれを含むブロックでない (または含まない) 場合、どの設定の影響も受けません (通常、これは配置されていないことを意味します)。

あなたの場合、ボックスは配置されていないため、テキストはボックスではなくビューポートに固定されています。ボックスはテキストを認識せず、ビューポートはテキストを含めるのに十分な大きさであるため、クリッピングはまったく発生しません。詳細については、仕様のセクション 11.1を参照してください。

ボックスposition: relativeを指定すると、テキストがボックスに対して相対的に配置され、結果としてクリップされます。

#vbox {
  position: relative;
  width: 100px;
  height: 500px;
  overflow: hidden;
  background: #afa;
}
#vtext {
  position: absolute;
  width: 100px;
  top: 250px;
}
<div id="vbox">
  <div id="vtext">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
    <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
  </div>
</div>

于 2013-02-12T16:51:26.797 に答える
-1

box 内に要素を作成しないでくださいposition:absolute。

CSS

#vbox{
    width:100px;
    height:500px;
    overflow:auto;
    background:#afa;
}
.vtext{
    font-size: 12px;
}

更新されたhttp://jsfiddle.net/V98b/4/を参照してください

于 2013-02-12T16:54:36.697 に答える