html - 如何隐藏表格上的溢出

Question

这个问题已经在 stackoverflow 上被问过好几次了，但是我想知道是否有人——也许是你——对我的问题没有独特的解决方案。

我目前有一个高度和宽度不同的父 div，其内容的宽度和高度也不同。为了垂直对齐子 div，我将其父级设置为 display: table; 并将其设置为 display: table-cell; 并嵌套另一个 div，如下所示:

<!-- css styling  -->
<style type="text/css">
.div-table {
display: table;
position: absolute;
height: 100%;
width: 100%;
 }

.div-cell {
display: table-cell;
padding: 10px;
vertical-align: middle;
 }

.div-alignedcontents {
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>

<!-- html  -->
<div class="div-table">
    <div class="div-cell">
        <div class="div-alignedcontents">
            <p>Some content that has a varying height and width!</p>
        </div>
    </div>
</div>

问题是 overflow:hidden 属性似乎对表格不起作用，并且 table-layout: fixed 属性不限制垂直比例/高度.一种解决方案是将上述所有 html 嵌套在另一个 div 中，并使用 overflow:hidden 为该 div 设置样式，但是我想我可能会先征求您的意见。

提前感谢您的帮助。

Answer 1

一个解决方案是为 .div-cell 定义 padding 的百分比，然后从 div-table 的宽度中减去相同的 padding .像这样:

.div-table {
    width: 95%
    height: 95%
}
.div-cell {
    padding: 2.5%
}

Fiddle