Настройка переполнения: скрыта правильно

Question

этот вопрос возник от another question.

This fiddle показывает 1 внешний и 5 внутренних элементов div.

Как установить 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; 
}