Maison > interface Web > tutoriel CSS > le corps du texte

Une brève analyse de plusieurs façons de masquer le texte d'une page en CSS

高洛峰
Libérer: 2017-03-08 14:37:44
original
1881 Les gens l'ont consulté

Méthode 1 : text-indent:-9999px

Pas grand chose à dire, l'ext-indent négatif est la méthode la plus couramment utilisée, mais il y a trois problèmes :
1. Les grandes valeurs négatives entraînent des problèmes de performances, tels que -9999em pour le bouton de soumission Sina/Tencent Weibo, qui mesure environ 120 000 à 160 000 pixels de large, par rapport à 100 largeurs de moniteur, sur un pad Android bas de gamme, en particulier lorsqu'il contient des effets d'animation, il se fige directement
2. Il y a un cadre virtuel sous le navigateur FireFox. En fait, le problème n'est pas grave, overflow:hidden peut être réparé;
3 Il ne peut pas être appliqué aux éléments horizontaux pseudo-inline-block IE6/IE7, sinon les éléments seront enlevés par text-indent.
Même si quelqu'un met en avant :

{ text-indent: 100%; white-spacing: nowrap; overflow: hidden; }
Copier après la connexion

En plus de l'amélioration des performances, les deux derniers problèmes existent toujours.

Méthode 2 : font-size:0
Dans cette méthode, si la hauteur ou la hauteur de ligne n'est pas définie pour le conteneur, si font-size:0 est défini, le le conteneur n'aura pas de hauteur

Méthode 3 : définir le rembourrage et ouvrir le conteneur

<style type="text/css">   
 .btn{height: 22px;width: 55px;overflow: hidden;}   
 .btn_download{display: inline-block;width:55px;height: 22px;padding-top:22px;background:url(btn_download.gif) no-repeat;text-align:center;}   
</style>   
<p class="btn">   
 <a class="btn_download" href="#" title="下载">下载</a>   
</p>
Copier après la connexion

Méthode 4 : lettre-. espacement première lettre
1. Cette méthode est compatible avec IE6, adaptée aux éléments horizontaux de bloc en ligne et aux éléments de bouton. Cependant, elle doit être écrite de la manière suivante

<button type="button/submit">按钮</button>
Copier après la connexion

.

mais pas Cela ressemble à ceci :

<input type="button/submit" value="按钮" />
Copier après la connexion

2. Cette méthode est affectée par l'attribut text-align.
text-align:left;letter-spacing la marge de la première lettre doit utiliser des valeurs négatives,
text-align:right;letter-spacing la marge de la première lettre doit utiliser des valeurs positives.
La taille de la valeur n'est en fait pas fixe. Généralement, la valeur absolue de l'espacement des lettres peut être supérieure à 2em, et la marge du premier caractère peut être plus grande dans la démo, elle est de -20em
3. N'utilisez pas de virgules pour séparer plusieurs : pseudo de la première lettre. -éléments. Il semble qu'ils seront tous invalides. Ils doivent être écrits séparément. Lorsque vous utilisez des virgules pour séparer, il doit y avoir un espace avant la virgule. Sinon, le navigateur IE6 ignorera cette déclaration :

.btn:first-letter,   
.img:first-letter {   
    margin-left: -20em;   
}   

.btn:first-letter ,    /* 逗号前需有1个空格 */
.img:first-letter {   
    margin-left: -20em;   
}
Copier après la connexion

4. Elle peut être placée dans un style public et appelée séparément

.notext {   
    text-align: left;   
    letter-spacing: -3em;   
    overflow: hidden;   
}   
.notext:first-letter {   
    margin-left: -20em;   
}
Copier après la connexion

.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal