Setting overflow:hidden correctly

Question

this question arose from another question.

This fiddle shows 1 outer and 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?

sunn0 · Accepted Answer · 2010-12-02 16:27:53Z

2

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

answered Dec 2, 2010 at 16:27

sunn0

3,0561 gold badge26 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chriscatfr Over a year ago

ok the conclusion of this url is: Wrap you content in another element. Not that easy to understand...

chriscatfr · Accepted Answer · 2011-05-30 13:07:36Z

0

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

answered May 30, 2011 at 13:07

chriscatfr

2,6523 gold badges26 silver badges34 bronze badges

Collectives™ on Stack Overflow

Setting overflow:hidden correctly

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related