{ hide_text } Rapport récapitulatif masquant le texte CSS

{ hide_text } Rapport récapitulatif masquant le texte CSS

Une démo de masquage de texte CSS que j'ai compilée récemment résumait plusieurs méthodes, dans l'espoir de trouver la solution la plus parfaite et de l'intégrer dans mes propres extraits de code. Cependant, à la fin, je me suis retrouvé dans une situation où la conclusion a été annulée à plusieurs reprises. Parce qu'il y a tellement de scénarios et d'éléments d'application à prendre en compte, quel que soit le navigateur, différents terminaux d'application et différentes structures de balises auront différentes solutions optimales. Par conséquent, au lieu d'espérer être plus « paresseux » au travail, c'est mieux. de consolider et d'accumuler les connaissances de base comme d'habitude, afin d'être plus à l'aise lorsque vous devez faire des compromis.

Parce que j'ai peu d'expérience, il est inévitable qu'il y ait des erreurs et des omissions dans la partie démo. Si vous rencontrez des problèmes, j'espère que vous pourrez les signaler.

Démo de la liste des méthodes

1. Sans réservation : affichage : aucun

Extrait de code :

(x)HTML

Je suis un texte à la sauce soja

CSS

/* Violence cachée*/
.hide_display{display:aucun;}

compatibilité:

avantage:

• Pratique et rapide
• Bonne compatibilité

défaut:

• Le lecteur d'écran ne parvient pas à lire
• Les hyperliens ne sont pas applicables
• Le texte alternatif de l'image nécessite l'arrière-plan d'autres étiquettes
• Classements de recherche d'impact
• Une utilisation intensive peut facilement être considérée comme une triche SEO

2. Choix de compromis : débordement : caché/position : absolue/visibilité : cachée

Extrait de code :

(x)HTML

Je suis le texte n°1 sur la sauce soja

Je suis le texte de sauce soja n°2

CSS

/* Masquer l'élément et le séparer du flux de texte afin qu'il n'affecte pas les autres éléments */
.hide_overflow{
hauteur:0px;
débordement : caché ;
display:block;/* Des éléments en ligne sont requis*/
float:left; /* Sortir du flux de documents ou position:absolute;*/
}
/* Positionner en dehors de la plage visible, hors du flux de texte, afin que l'élément n'affecte pas les autres éléments*/
.hide_position{
position : absolue ;
gauche : -32767px ;
}
/* Le principe est le même que .hide_position*/
.hide_visibility{
visibilité : masquée ;
position:absolute; /* Sortir du flux de documents*/
marge gauche : -32 767 px ;
}