{ hide_text } CSS text hiding summary report

{ hide_text } CSS text hiding summary report

A demo of CSS text hiding that I compiled recently summarized several methods, hoping to come up with the most perfect solution and put it into my own code snippets. However, in the end I fell into a situation where the conclusion was repeatedly overturned. Because there are so many application scenarios and elements that need to be considered, regardless of the browser, different application terminals and different tag structures will have different optimal solutions. Therefore, instead of hoping to be more "lazy" at work, It is better to consolidate and accumulate basic knowledge as usual, so that you can be more handy when you need to make trade-offs.

Because I have little experience, it is inevitable that there will be errors and omissions in the demo part. If you find any problems, I hope you can point them out.

Method list demo

1. Without reservation: display:none

Code snippet:

(x)HTML

<p class="hide_display">I am a soy sauce text</p>

CSS

/* Violence hiding*/
.hide_display{display:none;}

compatibility:

advantage:

• Convenient and fast
• Good compatibility

shortcoming:

• Screen reader can't read
• Hyperlinks are not applicable
• Image alt text requires background of other labels
• Impact search rankings
• Extensive use can easily be considered SEO cheating

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

Code snippet:

(x)HTML

<span class="hide_overflow">I am the No. 1 soy sauce text</span>
<p class="hide_position">I am No. 2 soy sauce text</p>
<p class="hide_visibility">I am No. 3 soy sauce text</p>

CSS

/* Hide the element and separate it from the text flow so that the element does not affect other elements */
.hide_overflow{
height:0px;
overflow:hidden;
display:block;/* Inline elements are required*/
float:left; /* Get out of the document flow or position:absolute;*/
}
/* Position outside the visible range, out of the text flow, so that the element does not affect other elements*/
.hide_position{
position:absolute;
left:-32767px;
}
/* The principle is the same as .hide_position*/
.hide_visibility{
visibility:hidden;
position:absolute; /* Get out of document flow*/
margin-left:-32767px;
}