How to hide css text

Hide method of css text: 1. Use [text-indent:-9999px;] method; 2. Use [line-height:0;] method; 3. Add span; 4. Use [display :none] method; 5. Use the [overflow:hidden] method.

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

How to hide css text:

1. Use text-indent:-9999px;

But he has a The limitation is that it only applies to the block-level element 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, convert a into block Often the element behind him will be pushed to the next line. If there is an a button behind this a, it must be floated with float to make the crowd appear behind him. 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 on IE6.0, 7.0, 8.0, Firefox 3.010 Passed

Third, 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 it this way for a single button.

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

So we can only use block and 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, simple and effective, but it has two The familiar flaw is that it is unfriendly to search engines and ignored by screen readers.

5. overflow:hidden:

This is a more reasonable and my favorite method (Note from Script House webmaster), 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;
}

Related tutorial recommendations:CSS video tutorial

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