Eine kurze Analyse verschiedener Möglichkeiten zum Ausblenden von Seitentext in CSS

Methode 1: text-indent:-9999px

Es gibt nicht viel zu sagen, negativer ext-indent ist die am häufigsten verwendete Methode, aber es gibt drei Probleme:
1. Große negative Werte führen zu Leistungsproblemen, wie z. B. -9999em für die Sina/Tencent Weibo-Senden-Schaltfläche, die etwa 120.000 bis 160.000 Pixel breit ist, im Verhältnis zu 100 Monitorbreiten, insbesondere auf einem Low-End-Android-Pad Wenn es Animationseffekte enthält, friert es direkt ein. Es gibt einen virtuellen Rahmen unter dem Firefox-Browser. Tatsächlich ist das Problem nicht groß, overflow:hidden kann repariert werden;
3 Es kann nicht auf IE6/IE7-Pseudo-Inline-Block-Horizontalelemente angewendet werden, da die Elemente sonst durch Texteinzug entführt werden.
Auch wenn jemand vorbringt:

{ text-indent: 100%; white-spacing: nowrap; overflow: hidden; }

Zusätzlich zur Leistungsverbesserung bestehen die beiden letztgenannten Probleme immer noch.

Methode 2: Schriftgröße:0
Wenn bei dieser Methode die Höhe oder Zeilenhöhe für den Container nicht festgelegt ist, wenn Schriftgröße:0 festgelegt ist, wird die Behälter hat keine Höhe.

Methode 3: Polsterung einstellen und Behälter öffnen

<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>

Methode 4: Buchstaben- Abstand+Anfangsbuchstabe
1. Diese Methode ist mit IE6+ kompatibel und für horizontale Inline-Block-Elemente und Schaltflächenelemente geeignet. Sie muss jedoch wie folgt geschrieben werden:

<button type="button/submit">按钮</button>

So kann es nicht sein:

<input type="button/submit" value="按钮" />

2. Diese Methode wird durch das text-align-Attribut beeinflusst. Der Rand von

text-align:left;letter-spacing+first-letter muss negativ sein und der Rand von
text-align:right;letter-spacing+first-letter muss positiv sein.
Die Größe des Wertes ist eigentlich nicht festgelegt. Im Allgemeinen kann der absolute Wert des Buchstabenabstands größer als 2em sein, und der erste Zeichenabstand kann größer sein. In der Demo beträgt er -20em.
3. Verwenden Sie keine Kommas, um mehrere Pseudobuchstaben zu trennen -Elemente. Es scheint, dass sie alle fehlschlagen. Bei der Verwendung von Kommas muss vor dem Komma ein Leerzeichen stehen. Andernfalls ignoriert der IE6-Browser diese Anweisung:

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

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

4. Sie kann in einem öffentlichen Stil platziert und separat aufgerufen werden

.notext {   
    text-align: left;   
    letter-spacing: -3em;   
    overflow: hidden;   
}   
.notext:first-letter {   
    margin-left: -20em;   
}

Das obige ist der detaillierte Inhalt vonEine kurze Analyse verschiedener Möglichkeiten zum Ausblenden von Seitentext in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!