What is the difference between overflow:hidden and display:none

css overflow hidden
user21067 picture user21067 · Sep 25, 2008 · Viewed 22.7k times · Source

What is the difference between overflow:hidden and display:none?

Answer

PhiLho picture PhiLho · Sep 25, 2008

Example:

.oh
{
  height: 50px;
  width: 200px;
  overflow: hidden;
}

If text in the block with this class is bigger (longer) than what this little box can display, the excess will be just hidden. You will see the start of the text only.

display: none; will just hide the block.

Note you have also visibility: hidden; which hides the content of the block, but the block will be still in the layout, moving things around.

Related questions

Make child visible outside an overflow:hidden parent

In CSS the overflow:hidden is set on parent containers in order to allow it to expand with the height of their floating children. But it also has another interesting feature when combined with margin: auto... If PREVIOUS sibling is …

Read More
CSS: Is it correct that text content of a div overflows into the padding?

I expected that the padding inside a div would remain clear of any text. But given the following html/css, the content-text spills out into the padding; <div class="foo">helloworld</div> .foo { float: left; overflow: …

Read More
CSS: Can you prevent overflow: hidden from cutting-off the last line of text?

When using CSS overflow: hidden , I've often found that the last line of text gets partially cut-off. Is there a way to prevent this so that any partial lines do not show-up. Almost like a vertical word-wrap.

Read More