Difference Between Overflow:Hidden and Display:None

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

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.

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

display:none means that 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.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

For example:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Replacing [style-tag-value] with display:none results in:

test |   | test

Replacing [style-tag-value] with visibility:hidden results in:

test |                        | test

css - What's difference between display:none; and visibility:hidden;?

Display:none hides the element from the page, and the space it would take up on the page can be used by other elements. visibility:hidden hides the elements, but it continues to consume the space it normally would.

What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?

The key difference seems to be that hidden elements are always hidden regardless of the presentation:

The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute

Since CSS can target different media/presentation types, display: none will be dependent on a given presentation. E.g. some elements might have display: none when viewed in a desktop browser, but not a mobile browser. Or, be hidden visually but still available to a screen-reader.

Which one is best optimized code display:none or visibility:hidden as per the performance?

visibility:hidden would be the more efficient as it does not change the flow of the DOM, reducing the amount of redraws.

Switching an element's display property would cause greater redrawing as space isn't allocated for the element. This would occur most with stacked elements.

CSS `display:none` effect on DOM

display: none; will just hide the element, but all the listener events will still be there. It won't be removed from the DOM.
But the difference between visibility: hidden and display: none is that, in first case, the tag and content inside will be rendered, whereas in second case the tag won't be rendered.

visibility: hidden;

div tag is rendered and affecting document flow

display: none;

div not rendered

Lots of DOM. Hidden vs display none

Well in a way, they are drawn (but not really): The browser keeps space for them, so it must consider the items when laying out the visible ones.

See MDC visibility:hidden:

The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 7).

If you specify display: none instead, the browser only as to care about and layout the visible ones. It does not have to take the others into account at all.

Depending on your visible/invisible ratio and the number of elements, this can make a difference.

---

Related Topics