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>

不是“溢出：隐藏；” 应该隐藏溢出的内容？

编辑 ：

在框中添加“位置：相对”可以解决问题，但我仍然感到困惑......有人可以解释这种行为吗？

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/V98bg/4/

于 2013-02-12T16:54:36.697 回答