オーバーフローの設定：正しく非表示

Question

この質問は、another questionから発生しました。

This fiddleは、1つの外側div要素と5つの内側div要素を示します。

overflow:hidden;は、たとえば、次のように設定します。サンプルwidth:60px;とサンプルheight:44px;の最後の内部div要素？

なぜ私のケースではうまくいかないのですか？

編集：オーバーフローを設定するために別のdivを使用する必要があるのはなぜですか？here？

Answer 1

display：table-cellを使用しているからです。 @ sunn0へ

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

Answer 2

おかげで私はあなたが（私の例では、それが非表示にすることを拒否したこと<li>

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

overflow:hidden;だったと互換性があります例えば<span>を追加しなければならないことを理解できますオーバーフロー）

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