How to set css not to display text

How to set text not to be displayed in css: 1. Use the text-indent attribute; 2. Use the line-height attribute; 3. Through the span display attribute; 4. Through display:none; 5. Through overflow:hidden ; 6. Through the positon attribute.

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

6 ways to hide text in CSS

As a web front-end developer, in order to make HTML semantic, it is often necessary to add some titles to the content module to make the page more interesting. Meaning, of course, our picture buttons can also smoothly absorb page information without css streaking. Usually in order to convey better visual effects, we often use pictures to replace fonts, and earlier front-end development Often the content is not given directly in the html, but with   (or even empty). In this way, it is impossible to know what the content of this block is when it is not loaded into the css.

Start with the topic, usually offset the font The method is:

1. Use text-indent:-9999px;

But it has a limitation. It only applies to block-level elements, and we often want to offset them sometimes. 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 it happens to be this a Behind it is an a button, which needs to be floated so that there are crowds of people behind it. Isn’t this a bit troublesome?

2. Use line-height:0;

The code is as follows :

font-size:0;

overflow:hidden;

Can perfectly "hide" the font on your background

Tested with ie6 .0, 7.0, 8.0, firefox 3.010 through

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;

Test 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 (Note from the Script House webmaster). The specific code is as follows:

The following is 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, but although the visibility does not exist, But it still takes up physical space, which is contrary to the purpose of hiding text.

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 are also It is possible to achieve a hidden text effect, but it is not recommended.

【Recommended learning: css video tutorial】

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