Shulou(Shulou.com)06/02 Report--

This article introduces the common methods of hiding text in CSS. The content is very detailed. Interested friends can use it for reference. I hope it will help you.

Are you familiar with the method of using CSS to hide text? here is a brief introduction, such as display:none method, which can make everything, including the container itself, disappear, simple and effective, but the defect can not be ignored, that is, it is not friendly to search engines and is ignored by screen readers.

CSS instance: a common method of hiding text in CSS

Today, let's learn some other commonly used methods and make some comments and analysis:

1 、 display:none:

It can make everything, including the container itself, disappear, simple and effective, but it has two familiar drawbacks: it is unfriendly to search engines and is ignored by screen readers.

2 、 text-indent:-9999px:

Text-indent is indented by the first line, so for multi-line text, there is an obvious deficiency if you use it alone, and you need to add white-space:nowrap; to make up for the deficiency, but there is another problem: physical space still exists, so you still need to set line-height:0; or use ultra-small font (a little BUG under IE). The final code is as follows:

CSS instance code:

.texthidden {text-indent:-9999px; white-space:nowrap; line-height:0;}

3 、 overflow:hidden:

Is a more reasonable and my favorite method, the specific code is as follows:

CSS instance code:

.texthidden {display:block;/* is uniformly converted to block-level elements * / overflow:hidden; width:0; height:0;}

4 、 positon:absolute:

It is pushed out of the visual area with absolute positioning, but although visibility does not exist, it still occupies physical space, which runs counter to the purpose of hidden text.

CSS instance code:

Texthidden {positon:absolute; margin-top:-9999px; margin-left:-9999px;} about how commonly used CSS hidden text is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.