오버플로 설정 : 올바르게 숨김

Question

이 질문은 another question에서 발생했습니다.

This fiddle은 1 개의 외부 div 요소와 5 개의 내부 div 요소를 보여줍니다.

overflow:hidden;을 어떻게 설정합니까? 마지막 내부 div 요소는 width:60px;이고 샘플은 height:44px;입니까?

내 경우에 작동하지 않는 이유를 알고 계십니까?

편집 : 왜 다른 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; 
}