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

css, hidden, overflow

Solution

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.

Problem

Original source