Comment masquer le contenu en CSS

Comment masquer le contenu en CSS : 1. Utilisez "text-indent:-9999px;" 2. Utilisez "line-height:0;" 3. Via "display:none"; " overflow:hidden"; 5. Masquer le contenu via "position".

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3

6 façons de masquer le contenu du texte en CSS

En tant que développeur web front-end, afin de rendre le HTML sémantique, nous devons souvent ajouter des titres aux modules de contenu pour rendre la page plus significative. Bien sûr, il y en a aussi. nos boutons d'image, sans CSS et fonctionnant nus. Il peut également absorber en douceur les informations de la page. Habituellement, afin de transmettre de meilleurs effets visuels, nous utilisons souvent des images pour remplacer les polices. Cependant, les premiers développements frontaux ne fournissaient souvent pas directement de contenu en HTML. , en utilisant   (ou même vide), de cette façon, il est impossible de savoir quel est le contenu de ce bloc lorsqu'il n'est pas chargé en css

Commençons par le sujet La manière habituelle de compenser. la police est :

1. Utilisez text-indent:- 9999px;

Mais elle a une limitation. Elle ne s'applique qu'aux éléments au niveau du bloc, et nous souhaitons souvent décaler la police. a parfois, donc le problème se pose, text-indent:-9999px ; Bien qu'il soit plus confortable à utiliser, si a est converti en bloc, les éléments derrière lui seront souvent poussés vers la ligne suivante s'il y a un bouton a. derrière le a, il faut le faire flotter avec float pour le faire apparaître derrière lui. Fans, est-ce un peu gênant

2. Utilisez line-height: 0; suit :

font-size:0;
overflow:hidden;

peut parfaitement "masquer" votre arrière-plan La police

a été testée avec IE6.0, 7.0, 8.0, Firefox 3.010 et a réussi

3. Le plus Un moyen pratique consiste à ajouter un span, puis à display:none, et il n'y aura aucun bug de cette façon.

Malheureusement, il y a une balise supplémentaire. S'il est utilisé dans une boucle, le HTML ajoutera un tas d'octets. Il est recommandé de l'utiliser de cette façon pour un seul bouton.

La méthode pour masquer la valeur d'entrée est un peu difficile

Nous ne pouvons donc utiliser que le bloc et l'indentation de texte pour "décaler" afin de simuler le masquage

display:block;
font-size:0;
line-height:0;
text-indent:-9999px;

Testé ie6. 0, 7.0, Firefox 3.010 à

4. display:none : il peut tout faire disparaître, y compris le conteneur lui-même. C'est simple et efficace, mais il présente deux défauts familiers, à savoir peu convivial pour les moteurs de recherche et ignoré. par les lecteurs d'écran.

5. overflow:hidden :

C'est une méthode plus raisonnable et ma préférée. Le code spécifique est le suivant :

Ce qui suit est le contenu cité :

Le code est le suivant :

.texthidden{
display:block;/*统一转化为块级元素*/
overflow:hidden;
width:0;
height:0;
}

6. positon:absolute :

utilise le positionnement absolu pour le pousser hors de la zone visible, mais bien que la visibilité n'existe pas, il occupe toujours l'espace physique et est caché Le but du texte est contraire au but

Voici le contenu cité :

Le code est le suivant :

.texthidden{
positon:absolute;
margin-top:-9999px;
margin-left:-9999px;
}

Remarque : Bien que les trois méthodes suivantes puissent également avoir pour effet de masquer du texte, elles ne sont pas recommandées.

Étude recommandée : "

Tutoriel vidéo CSS

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!