设置溢出：正确隐藏

Question

这个问题来自another question。

This fiddle显示1个外部和5个内部div元素。

如何在例如{1}}中设置overflow:hidden;最后一个带有样本width:60px;的内部div元素和一个样本height:44px;？

你知道为什么它不起作用吗？

编辑：为什么我必须使用另一个div来设置overflow：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;
}