html - 显示为表格的 div 没有限制

Question

我有这样的结构:

<div id="preview">
    <div class="small">preview</div>
    <div id="prev_content"></div>
</div>

以及以下 CSS 规则:

#preview {
    position:absolute;
    display: table;
    top:160px;
    left:10px;
    width:457px;
    height:125px;
    max-width: 457px;
    max-height: 125px;
    border-radius: 20px;
    background-image:url(../images/preview_greetings.png);
    color: #FFF;
    font-family: shofar;
    font-size:27px;
    padding-right:130px;
    padding-left:20px;
    overflow: hidden;
}

#preview div.small{
    position: absolute;
    top:-40px;
    left:0px;
    text-align: center;
    width:607px;
    color:black;
    font-size:30px;
}

#prev_content{
    max-width: 100%;
    overflow: hidden;
    max-height: 102px;
    display: table-cell;
    vertical-align: middle;
}

但出于某种原因，如果我有溢出文本，它只会继续扩展 div 而不会停止。

这是一个 fiddle : http://jsfiddle.net/sTGpf/

当它达到极限时，如何让它停止生长？我使用表格显示的原因是因为我需要垂直对齐。

Answer 1

display:table-cell 导致高度根据内容扩展。在 div 周围使用包装器并设置垂直对齐所需的样式。对于有实际内容的DIV，设置max-height:102px;

#prev_content{
max-width: 100%;
max-height:102px;
}

#wrapper
{
vertical-align:middle;
display:table-cell;
max-height:102px;
}

Fiddle