我正在尝试制作一个内部带有滚动文本的框。问题是,当文本位于框的中间位置时,当我希望它被剪裁时它显示在框的外面。
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 的内容?
编辑:
在框中添加“postion:relative”解决了问题,但我仍然感到困惑...有人可以解释这种行为吗?
最佳答案
如果具有该设置的元素不是(或不包含)其包含 block (通常,这意味着它未定位),则绝对定位元素不受任何 overflow
设置的影响。
在您的情况下,框未定位,因此文本锚定到视口(viewport)而不是框。该框不知道文本,并且视口(viewport)足够大以包含文本,因此根本不会发生裁剪。您可以在 section 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>
关于html - overflow:hidden 不剪辑绝对定位的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14837553/