事業部顯示爲表沒有限制

我有這樣的結構：事業部顯示爲表沒有限制

<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

事業部顯示爲表沒有限制

回答

相關問題