Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So verbergen Sie CSS-Text

coldplay.xixi
Freigeben: 2023-01-05 16:09:14
Original
5878 Leute haben es durchsucht

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;
Nach dem Login kopieren

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

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;
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!