Setting overflow:hidden correctly

this question arose from another question.

This fiddle shows 1 outer a开发者_开发技巧nd 5 inner div-elements.

How do I set overflow:hidden; in the e.g. last inner div-element with a sample width:60px; and a sample height:44px;?

Do you know why it is not working in my case?

Edit: Why do I have to use another div to set overflow:hidden here?

It is because you are using display: table-cell;

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

thanks to @sunn0 I could understand that you must add a <span> for example, which will be compatible with 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>

(In my example it was <li> that refused to hide the overflow)

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