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并且不会停止。

这是一个小提琴： 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

Answer 2

您可以使用Centering in the Unknown。

，而不是使用display: table居中

Demo

#preview {
    height:125px;   
    font-size:0; /* To avoid extra spaces */
}
#preview:before {
    content: '';
    height: 100%;
}
#preview:before, #prev_content {
    display: inline-block;
    vertical-align: middle
}
#prev_content{
    overflow: hidden;
    max-height: 102px;
    font-size: 27px;
}

Answer 3

从#prev_content中移除display: table-cell;，它将尊重max-height: 102px;

演示：http://jsfiddle.net/sTGpf/3/

显示为表格的Div没有限制

3 个答案: