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

Question

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

Solution 1

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.

Solution 2

display: none removes the element from the page, and the flow of the page acts as if it's not there at all.

overflow: hidden:

The CSS overflow: hidden property can be used to reveal more or less of an element based on the width of the browser window.

Solution 3

Simple example of overflow: hidden http://www.w3schools.com/Css/tryit.asp?filename=trycss_pos_overflow_hidden

If you edit the CCS on that page, you can see the difference between the overflow attributes (visible | hidden | scroll | auto ) - and if you add display: none to the css, you will see the whole content block is disappears.

Basically it's a way of controlling layout and element "flow" - if you are allowing user input (from a CMS field say), to render in a fixed sized block, you can adjust the overflow attribute to stop the box increasing in size and therefore breaking the layout of the page. (conversely, display: none prevents the element from displaying and therfore the entire page re-adjusts)

Solution 4

By default, HTML elements are as tall as required to contain their content.

If you give an HTML element a fixed height, it may not be big enough to contain its content. So, for example, if you had a paragraph with a fixed height and a blue background:

<p>This is an example paragraph. It has some text in it to try and give it a reasonable height. In a separate style sheet, we’re going to give it a blue background and a fixed height. If we add overflow: hidden, we won’t see any text that extends beyond the fixed height of the paragraph. Until then, the text will “overflow” the paragraph, extending beyond the blue background.</p>

p {
    background-color: #ccf;
    height: 20px;
}

The text within the paragraph would extend beyond the bottom edge of the paragraph.

The overflow property allows you to change this default behaviour. So, if you added overflow: hidden:

p {
    background-color: #ccf;
    height: 20px;
    overflow: hidden;
}

Then you wouldn’t see any of the text beyond the bottom edge of the paragraph. It would be clipped to the fixed height of the paragraph.

display: none would simply make the entire paragraph (visually) disappear, blue background and all, as if it didn’t appear in the HTML at all.

Solution 5

display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. Overflow hidden means that the tag is rendered with a certain height and any text etc which would cause the tag to expand to render it will not display. I think what you mean to ask is visibility:hidden. This means that unlike display none, the tag is not visible, but space is allocated for it on the page. so for example

<span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>

display:none would be:

test |   | test

visibility:hidden would be:

test |                        | test

In visibility:hidden the tag is rendered, it just isn't seen on the page.

View more solutions

Comments

[Liam]

image? could you say element?