Comment configurer CSS pour ne pas afficher de texte

Comment définir le texte à ne pas afficher en CSS : 1. Utilisez l'attribut text-indent ; 2. Utilisez l'attribut line-height ; 3. Via l'attribut span+display ; ; 5. Par débordement : caché ; 6. Par l'attribut positon.

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

6 façons de masquer du texte en CSS

En tant que développeur web front-end, afin de sémantiser le HTML, il est souvent nécessaire d'ajouter quelques titres au contenu module pour rendre la page plus intéressante. Cela signifie, bien sûr, que nos boutons d'image peuvent également absorber en douceur les informations de la page sans utiliser CSS. Habituellement, afin de transmettre de meilleurs effets visuels, nous utilisons souvent des images pour remplacer les polices et le front-end antérieur. développement Souvent le contenu n'est pas donné directement dans le html, en utilisant   (ou même vide), de sorte qu'il est impossible de savoir quel est le contenu de ce bloc lorsqu'il n'est pas chargé dans le css

Voyons commencez par le sujet, décalez généralement la police. La méthode est la suivante :

1. Utilisez text-indent:-9999px;

Mais elle a une limitation ne s'applique qu'aux éléments de niveau bloc, et on veut souvent les décaler parfois. La police sur a, 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; à la ligne suivante. S'il s'agit d'un derrière, il s'agit d'un bouton a, qui doit être flottant pour faire apparaître la foule derrière lui. N'est-ce pas un peu gênant ?

2. Utilisez line-height: 0;

Le code est le suivant :

font-size:0;

overflow:hidden;

Peut parfaitement " masquer" la police sur votre arrière-plan

Testé sur ie6 .0, 7.0, 8.0, firefox 3.010 à

3. Le moyen le plus pratique est d'ajouter une étendue puis d'afficher : aucun, et il n'y aura pas de bugs 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 (Note du webmaster de Script House), 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 :

Utilisez le positionnement absolu pour le pousser hors de la zone visible, mais bien que le la visibilité n'existe pas, Mais elle occupe quand même de l'espace physique, ce qui est contraire au but de cacher du texte

Voici le contenu cité :

Le code est le suivant :

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

Remarque : bien que les 3 méthodes suivantes soient également possibles, il est possible d'obtenir un effet de texte caché, mais ce n'est pas recommandé.

[Apprentissage recommandé : 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!