Heim >Web-Frontend >CSS-Tutorial >So verbergen Sie CSS-Text

So verbergen Sie CSS-Text

coldplay.xixi
coldplay.xixiOriginal
2021-04-16 15:32:035964Durchsuche

So verbergen Sie CSS-Text: 1. Verwenden Sie die Methode [text-indent:-9999px;] 2. Verwenden Sie die Methode [line-height:0;] 4. Verwenden Sie die Methode [display:none; ]-Methode ;5. Verwenden Sie die [overflow:hidden]-Methode.

So verbergen Sie CSS-Text

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

So verbergen Sie CSS-Text:

1. Verwenden Sie text-indent:-9999px;

Es gilt jedoch nur für Elemente auf Blockebene, und wir möchten sie oft versetzen Wenn die Schriftart a in einen Block umgewandelt wird, tritt das Problem auf: text-indent:-9999px; Dies ist ein a-Button, der schwebend sein muss, damit die Menge dahinter erscheint. 2. Verwenden Sie line-height:

Der Code lautet wie folgt:

font-size:0;
overflow:hidden;

Kann die Schriftarten auf Ihrem Hintergrund perfekt „verstecken“

Getestet mit IE6.0, 7.0, 8.0, Firefox 3.010 und bestanden

Drei, der bequemste Weg ist, einen Bereich hinzuzufügen und dann anzuzeigen:none und dort Auf diese Weise entstehen keine Fehler.

Leider gibt es noch ein weiteres Tag, wenn es in einer Schleife verwendet wird. Es wird empfohlen, es auf diese Weise für eine einzelne Schaltfläche zu verwenden.

Die Methode zum Ausblenden des Eingabewerts ist etwas schwierig

Daher können wir Block und Texteinzug nur zum „Offset“ verwenden, um das Ausblenden zu simulieren

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

Nach dem Testen von IE6.0, 7.0 und Firefox 3.010 bestanden

4. display:none:

Es kann alles verschwinden lassen, einschließlich des Containers selbst. Es ist einfach und effektiv, weist jedoch zwei bekannte Mängel auf: Es ist nicht suchmaschinenfreundlich und wird von Bildschirmleseprogrammen ignoriert.

5. overflow:hidden:

Dies ist eine vernünftigere und meine Lieblingsmethode (Anmerkung des Script House-Webmasters). Der spezifische Code lautet wie folgt:

Das Folgende ist der zitierte Inhalt:

Der Code lautet wie folgt:

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

Foto

Empfohlenes Tutorial: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verbergen Sie CSS-Text. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:So löschen Sie Float in CSSNächster Artikel:So löschen Sie Float in CSS