3 Ways to hide content in CSS

3 Ways to hide content in CSS

Typically: Hide text/images, hide links, hide out-of-scope content, hide pop-up layers, hide scrollbars, clear dislocations and floats, and more.

1. Use Display:none to hide all content

Display:none can let all the content in the page not display, such as code, text, links, pictures, div layer, is the recommended content hiding way.

<div style= "Display:none;" > Hidden Content </div>

value	Description
None	This element is not displayed.
Block	This element is displayed as a block-level element with a newline character before and after this element.
Inline	Default. This element is displayed as an inline element with no line break before or after the element.
Run-in	This element is displayed as a block-level element or inline element, depending on the context.
Inherit	Specifies that the value of the display property should be inherited from the parent element.

2. Use Visibility:hidden to hide content

Visibility:hidden and Display:none can hide the content almost the same, but the only difference is that while it hides the content, the hidden content still occupies space, and the space where the content is hidden will appear blank in the page.

<div style= "Visibility:hidden;" > Hidden Content </div>

value	Description
Visible	The default value. The element is visible.
Hidden	The element is not visible.
Collapse	When used in a TABLE element, this value can delete one row or column, but it does not affect the layout of the table. The space occupied by rows or columns is left for other content to use. If this value is used on other elements, it is rendered as "hidden".
Inherit	Specifies that the value of the visibility property should be inherited from the parent element.

3. Use Overflow:hidden to hide overflow content

Overflow:hidden this way can hide the content outside the fixed area, it can control the display area effectively. It should be noted, however, that you need to define a width and height for it, otherwise it will not work.

<div style= "width:120px; height:20px; overflow:hidden;" > Content ................</div>

    There is a branch in overflow usage, Overflow-x:hidden and overflow-y:hidden,x are horizontal ranges, Y is the vertical range, and these two properties are often used when you need to hide the scroll bar.

value	Description
Visible	The default value. The content is not trimmed and is rendered outside the element box.
Hidden	The content is trimmed and the rest is not visible.
Scroll	The content is trimmed, but the browser displays scroll bars to see the rest of the content.
Auto	If the content is trimmed, the browser displays scroll bars to see the rest of the content.
Inherit	Specifies that the value of the overflow property should be inherited from the parent element.

3 Ways to hide content in CSS