設置溢出：正確隱藏

Question

此問題來自another question。

This fiddle顯示1個外部元素和5個內部元素。

如何在例如overflow:hidden;中設置最後一個內部div元素，樣本width:60px;和樣本height:44px;？

你知道爲什麼它不起作用嗎？

編輯：爲什麼我必須使用另一個div來設置溢出：hidden here？

Answer 1

這是因爲您正在使用display：table-cell;

http://bytes.com/topic/html-css/answers/153857-how-can-i-force-clipping-text-table-cell

Answer 2

感謝@ sunn0我能理解，你必須添加<span>例如，這將是與overflow:hidden;

<div id="myid"> 
    <ul> 
    <li><span class="content">my content</span></li> 
    <li><span class="content">my other content</span></li> 
    </ul> 
</div> 

（在我的例子是<li>是拒絕隱藏兼容溢出）

#myid ul li{ 
    list-style-type: none; 
    width: 110px; height: 20px; 
    display: table-cell; 
} 

#myid ul li span.content{ 
    display: block; 
    width: 110px; height: 20px; 
    overflow: hidden; 
}