{Hide_text} CSS text hiding Summary Report

A recently prepared copyCSSHidden textDemoI have summarized several methods and hope to come up with the most perfect solution and put it into my own code snippets. However, at the end, I am stuck in a situation where I repeatedly overturn the conclusion. Because there are too many application scenarios and elements to consider, you can leave your browser blank. Different application terminals and tag structures have different optimal solutions. Therefore, rather than "stealing some laziness" at work, it is better to consolidate and accumulate basic knowledge and be more comfortable when balancing the need.

Because of your relatively low experience, the demo will inevitably have errors and omissions. If you find any problems, I hope you can point them out.

Method list demo

 1. unretained: display: none

Code snippet:
(X) HTML
<P class = "hide_display"> I am a text for Soy Sauce </p> CSS
/* Brute force hiding */
. Hide_display {display: none ;}

Compatibility:

Advantages:

• Convenient and fast
• Good compatibility

Disadvantages:

• Screen reader cannot read
• Hyperlink not applicable
• The image replaces the background of text that requires other labels
• Affected search ranking
• A large amount of use is easy to think of as SEO cheating

2. compromise options: overflow: hidden/position: absolute/visibility: hidden

Code snippet:

(X) HTML
<Span class = "hide_overflow"> I am the text of No. 1 soy sauce. </span>
<P class = "hide_position"> I am the text of soy sauce 2. </p>
<P class = "hide_visibility"> I am the text of No. 3 soy sauce. </p>CSS
/* Hide the element from the text stream so that the element does not affect other elements */
. Hide_overflow {
Height: 0px;
Overflow: hidden;
Display: block;/* In-Row Element needs */
Float: left;/* exit the Document Stream or position: absolute ;*/
}
/* Locates outside the visible range and leaves the text stream so that the element does not affect other elements */
. Hide_position {
Position: absolute;
Left:-32767px;
}
/* Same principle as. hide_position */
. Hide_visibility {
Visibility: hidden;
Position: absolute;/* disconnects from the document stream */
Margin-left:-32767px;
}

• Three pages in total:
• Previous Page
• 1
• 2
• 3
• Next Page