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

Question

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

Answer 1

Overflow:hidden just says if text flows outside of this element the scrollbars don't show. display:none says the element is not shown.

Answer 2

Let's say you have a div that measures 100 x 100px

You then put a whole bunch of text into it, such as it overflows the div. If you use overflow: hidden; then the text that fits into the 100x100 will not be displayed, and will not affect layout.

display: none is completely different. It renders the rest of the page as if if the div was still visible. Even if there is overflow, that will be taken into account. It simply leaves space for the div, but does not render it. If both are set: display: none; overflow: hidden; then it will not be displayed, the text will not overflow, and the page will be rendered as if the invisible div were still there.

In order to make the div not affect the rendering at all, then both display: none; overflow: hidden; should be set, and also, do something such as set height: 0;. Or with the width, or both, then the page will be rendered as if the div did not exist at all.

Answer 3

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.

Answer 4

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.

Answer 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.

Answer 6

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)

Answer 7

overflow: hidden - hides the overflow of the content, in contrast with overflow: auto who shows scrollbars on a fixed sized div where it's inner content is larger than it's size

display: none - hides an element and it completely doesn't participant in content layout

P.S. there is no difference between the two, they are completely unrelated

Answer 8

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.