事业部显示为表没有限制

我有这样的结构：事业部显示为表没有限制

<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/

我怎样才能让它停止生长时，它已经达到了它的局限性？我使用表格显示的原因是因为我需要垂直对齐。从#prev_content

来源

2013-12-11 kfirba

放的位置是：绝对的;在你的prev_content css中。 –

http://jsfiddle.net/sTGpf/9/ –

显示：表细胞是导致高度扩大基于内容。在div上使用包装并设置垂直对齐所需的样式。对于具有实际内容的DIV，请将max-height：102px;

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

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

Fiddle

来源

2013-12-11 19:21:30 Poornima

这只适用于单行。 – SquareCat

确实。不是一个好的解决方案 – kfirba

我意识到发布答案后。请看我编辑的答案。 – Poornima

删除display: table-cell;并且它将尊重max-height: 102px;

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

来源

2013-12-11 19:18:42

但我也需要它垂直对齐。你有没有其他方法可以垂直对齐呢？ – kfirba

垂直对齐也适用于'display：inline-block'元素，您可以使用它们将多个元素并排排列。 – SquareCat

增加行高，例如'line-height：125px;'使垂直点亮工作 –

而不是使用display: table到中心，你可以使用Centering in the Unknown。

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; 
}

来源

2013-12-11 19:35:26 Oriol

事业部显示为表没有限制

回答

相关问题