CSS Hidden content methods

Source: Internet
Author: User

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;" > I don't take the floor, you can't see me;</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;" > I took the land, and you can't see me;</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;" > I take up too much land and you can't see my tail ... </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.

CSS Hidden content methods

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.