How to hide content in css

How to hide content in css: 1. Use "text-indent:-9999px;"; 2. Use "line-height:0;"; 3. Through "display:none"; 4. Through " overflow:hidden"; 5. Hide content through "positon".

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer

6 ways to hide text content in CSS

As a web front-end developer, in order to make HTML semantic, we often need to add some titles to the content module to make the page more meaningful. Of course, there are also our picture buttons, without css streaking. It can also smoothly absorb page information. Usually in order to convey better visual effects, we often use pictures to replace fonts. However, early front-end development often did not directly provide content in HTML, using   (or even empty), In this way, it is impossible to know what the content of this block is when it is not loaded into css

Starting with the topic, the usual way to offset the font is:

1. Use text-indent:- 9999px;

But it has a limitation. It only applies to block-level elements block, and we often want to offset the font on a, so the problem arises, text-indent:-9999px ;Although it is more comfortable to use, if a is converted into a block, the elements behind it will often be pushed to the next line. If there is an a button behind the a, it must be floated with float to make it appear behind it. Fans, is this a bit troublesome?

2. Use line-height:0;

The code is as follows:

font-size:0;
overflow:hidden;

It can perfectly "hide" your background The font

has been tested on IE6.0, 7.0, 8.0, Firefox 3.010 and passed

3. The most convenient way is to add a span and then display:none, and there will be no bugs in this way.

Unfortunately, there are one more tags. If used in a loop, the html will have a lot more bytes. It is recommended to use this for a single button.

The method of hiding the input value is a bit difficult.

So we can only use block plus text-indent to "offset" to simulate hiding

display:block;
font-size:0;
line-height:0;
text-indent:-9999px;

Tested ie6.0, 7.0, firefox 3.010 through

4. display:none: It can make everything including the container itself disappear. It is simple and effective, but it has two familiar flaws, that is Unfriendly to search engines and ignored by screen readers.

5. overflow:hidden:

This is a more reasonable and my favorite method. The specific code is as follows:

The following is the quoted content:

The code is as follows:

.texthidden{
display:block;/*统一转化为块级元素*/
overflow:hidden;
width:0;
height:0;
}

6. positon:absolute:

Use absolute positioning to push it out of the visible area. However, although the visibility does not exist, it still occupies the physical space and is hidden. The purpose of text is contrary to

The following is the quoted content:

The code is as follows:

.texthidden{
positon:absolute;
margin-top:-9999px;
margin-left:-9999px;
}

Note: Although the following three methods can also achieve the effect of hiding text, they do not recommend.

Recommended learning: "css video tutorial"

The above is the detailed content of How to hide content in css. For more information, please follow other related articles on the PHP Chinese website!