A recent collation of a CSS text hidden demo

{Hide_text} CSS Text hiding summary report

Recently collated a CSS text hidden demo, summed up several methods, hoping to come up with one of the most perfect solution to put into their own code snippets, but, in the end is caught in a repeated reversal of the conclusion of the situation. Because there are so many scenarios and elements to consider, put down the browser, different application terminals, different tag structure will have the best solution, so, rather than hope in the work of "steal some lazy", as usual to consolidate the accumulation of knowledge of the foundation, in the need to weigh the time, it will be more handy.

Because of their own experience is still shallow, the demo part will inevitably have errors and omissions, such as the discovery of problems, hope you can point out.

Method List Demo

1. No Reservations: Display:none

Code fragment:

(x) Html

<p class= "Hide_display" > I am the text of the soy sauce </p>

Css

* * Violence hidden * *
. Hide_display{display:none;}

Compatibility:

Advantages:

• Convenient
• Good compatibility

Disadvantages:

• Screen readers cannot read
• Hyperlinks do not apply
• Picture substitution text requires a background of other labels
• Affect search Rankings
• A lot of use is easy to be considered SEO cheating

2. Compromise choice: Overflow:hidden/position:absolute/visibility:hidden

Code fragment:

(x) Html

<span class= "Hide_overflow" > I am the text of a number of soy sauce </span>
<p class= "Hide_position" > I am the text </p> of the No. second soy sauce
<p class= "Hide_visibility" > I am the text </p> of the No. third soy sauce

Css