当我把文本放入这样的容器中时，文本的顶部被截断（pen）：
<div class="align-items-center d-flex justify-content-center mb-3 overflow-auto" style="background-color: red; height: 5rem">
<figure class="mb-0" style="background-color: orange">
<div class="d-flex justify-content-center text-center" style="background-color: yellow">
Hickory dickory dock.<br>
The mouse ran up the clock.<br>
The clock struck one,<br>
The mouse ran down,<br>
Hickory dickory dock.
</div>
</figure>
</div>当我像这样将Bootstrap类转换为内联样式时，文本的顶部没有被截断（pen）：
<div style="align-items: center; background-color: red; display: flex; height: 5rem; justify-content: center; margin-bottom: 1rem; overflow: auto">
<figure style="background-color: orange; margin-bottom: 0">
<div style="background-color: yellow; display: flex; justify-content: center; text-align: center">
Hickory dickory dock.<br>
The mouse ran up the clock.<br>
The clock struck one,<br>
The mouse ran down,<br>
Hickory dickory dock.
</div>
</figure>
</div>我的问题是：
- 为什么？
- 我怎样才能保留Bootstrap类而不删除内容的顶部？
1条答案
按热度按时间2w2cym1i1#
这是由于
height: 5rem和overflow-auto类的组合应用于外部div元素。height属性将元素的高度限制为5 rem，并且overflow-auto属性在内容溢出元素时创建一个可滚动容器。在本例中，由于内容大于5 rem，因此创建了一个可滚动容器。但是内容的顶部被隐藏，因为它在容器的可见区域之外。要保留Bootstrap类，您可以删除
height属性，然后将overflow-y设置为visible-这将阻止创建可滚动容器。overflow-x属性将保留为auto，以便在需要时创建水平条。这种组合可确保整个内容可见，而不会切断顶部。