Comment masquer le texte CSS

Comment masquer le texte CSS : 1. Utilisez la méthode [text-indent:-9999px;] ; 2. Utilisez la méthode [line-height:0;] 3. Ajoutez une étendue ; none] méthode ; 5. Utilisez la méthode [overflow:hidden].

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.

Comment masquer le texte CSS :

1. Utilisez text-indent:-9999px;

Mais il a un La limitation est que cela ne s'applique qu'au bloc d'éléments au niveau du bloc, et nous voulons souvent décaler la police sur a, donc le problème se pose, text-indent:-9999px bien qu'il soit plus confortable à utiliser, convertissez a en bloc; Si l'élément derrière lui est souvent poussé vers la ligne suivante, s'il y a un bouton a derrière ce a, il doit utiliser float pour le faire flotter afin qu'il y ait des foules de gens 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 background

Testé avec ie6.0, 7.0, 8.0, firefox 3.010 et réussi

3. Le moyen le plus pratique est d'ajouter une étendue puis d'afficher : aucun, et il y aura 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 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, simple et efficace, mais il en a deux Le défaut familier est qu'il est 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 Home), le code spécifique est le suivant :

Voici le contenu cité :

Le code est le suivant :

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

Recommandation de tutoriel connexe : CSS Tutoriel vidéo

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!