CSS「table-cell」樣式元素：最大高度（和溢出：隱藏）

我在display: table div內有display: table-cell div。有什麼辦法來限制身高嗎？我試過設置高度，最大高度和溢出：隱藏，但它沒有效果。（height不設置最低高度，但其他人似乎什麼也不做。在http://jsbin.com/gajaka/1/edit CSS「table-cell」樣式元素：最大高度（和溢出：隱藏）

<div class='table'> 
    <div class='cell'>This should be maximum 100px. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
</div>

CSS

.table { 
    display: table; 
    background: green; 
    width: 100px; 
    height: 100px; 
    max-height: 100px; /* ignored */ 
    overflow: hidden; /* ignored */ 
} 

.cell { 
    display: table-cell; 
    vertical-align: middle; 
    max-height: 100px; /* ignored */ 
    text-align: center; /* doesn't work */ 
}

來源

2014-10-08 mahemoff

'表cell' =>讓元件表現得像一個''元件 – AvrilAlejandro 2014-10-08 17:08:49

見例至於我可以用這個代碼中看到，它看起來你使用的是表格單元格顯示，以便垂直對齊文本，但是表格單元格帶有內在的折衷，你失去了對y維度的控制;也就是說，表格單元格將忽略所有的高度參數，如你已經看到了，

解決此問題的方法是將display子屬性從table-cell更改爲inline-block。然後，爲了獲得垂直居中，我們可以執行以下操作：在.table元素內放置一個僞元素，並將其垂直對齊。垂直對齊需要相對於另一個內聯元素，因此此僞元素爲.cell提供了垂直對齊的參考。這應該垂直對齊你的文字。

新輸出：http://css-tricks.com/centering-in-the-unknown/

來源

2014-10-08 17:46:03

：「定心在未知」，描述上面的垂直居中技術http://jsbin.com/faqadumasado/1/edit?html,css,output

第謝謝，我確實希望確認高度在這裏被忽略，也沒有意識到'display：table'在沒有'display：table-cell'子代的情況下會有任何用處。 – mahemoff 2014-10-09 13:57:05

CSS「table-cell」樣式元素：最大高度（和溢出：隱藏）

回答

相關問題