html – overflow：hidden不剪辑绝对定位的内容

我正在试图用一个滚动文本框.问题是,当文本位于框的中间位置时,当我希望剪切时,它显示在外面.

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>

不是“溢出：隐藏”是为了隐藏溢出的内容？

编辑：

将“postion：relative”添加到框中可以解决问题,但我仍然感到困惑…有人可以解释这个行为吗？

解决方法

绝对定位的元素不受任何溢出设置的影响,如果该设置的元素不包含(或不包含)其包含的块(通常这意味着它不定位).

在您的情况下,该框没有定位,所以文本被锚定到视口而不是框.该框不知道文本,并且视口足够大以容纳文本,因此根本不会出现裁剪.您可以在规格的section 11.1中找到血腥细节.

给你的框位置：相对将导致文本相对于框定位,并被裁剪为结果.

#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,</p>
  </div>
</div>

原文链接：https://www.f2er.com/html/230884.html

html – overflow：hidden不剪辑绝对定位的内容

解决方法

猜你在找的HTML相关文章