So stellen Sie CSS so ein, dass kein Text angezeigt wird

So legen Sie fest, dass Text in CSS nicht angezeigt wird: 1. Verwenden Sie das Attribut „text-indent“; 3. Über das Attribut „span+display“; overflow:hidden; 6. Durch das positionon-Attribut.

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

6 Möglichkeiten, Text in CSS auszublenden

Um HTML semantisch zu machen, müssen wir dem Inhaltsmodul oft einige Titel hinzufügen, um die Seite aussagekräftiger zu machen Außerdem können unsere Bildschaltflächen problemlos aufgenommen werden, auch wenn CSS nackt ausgeführt wird. Um bessere visuelle Effekte zu erzielen, verwenden wir häufig Bilder, um Schriftarten zu ersetzen HTML, mit   (auch leer), sodass Sie nicht wissen können, was der Inhalt dieses Blocks ist, wenn er nicht in CSS geladen ist. Beginnen wir mit der üblichen Methode zum Versetzen von Schriftarten:

1 -indent:-9999px;

Es gilt jedoch nur für Elemente auf Blockebene, und wir möchten die Schriftart auf a verschieben, sodass das Problem auftritt Bequem zu verwenden: Wenn a in einen Block umgewandelt wird, werden die Elemente dahinter oft in die nächste Zeile verschoben. Wenn sich hinter diesem a ein a-Knopf befindet, müssen wir ihn mit float schweben lassen, damit sich dahinter Menschenmengen befinden . Ist das richtig? Es ist ein bisschen mühsam.

Schriftart auf Ihrem Hintergrund

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

3. Am bequemsten ist es, ein span hinzuzufügen und dann display:none anzuzeigen, und auf diese Weise treten keine Fehler auf.

Leider gibt es 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 Test von IE6.0, 7.0, Firefox 3.010, bestanden

4 . display:none: Es kann alles, einschließlich des Containers selbst, verschwinden lassen. 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 zitierte Inhalt lautet wie folgt:

Der Code lautet wie folgt :

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

6. positon:absolute:

Verwenden Sie die absolute Positionierung, um den Text aus dem sichtbaren Bereich zu verdrängen. Obwohl die Sichtbarkeit nicht vorhanden ist, nimmt er dennoch physischen Raum ein, was dem Zweck des Versteckens von Text zuwiderläuft

Das Folgende ist der zitierte Inhalt:

Code wie folgt:

.texthidden{
positon:absolute;
margin-top:-9999px;
margin-left:-9999px;
}

Hinweis: Obwohl die folgenden drei Methoden auch versteckte Texteffekte erzielen können, werden sie nicht empfohlen.

【Empfohlenes Lernen:

CSS-Video-Tutorial

】

Das obige ist der detaillierte Inhalt vonSo stellen Sie CSS so ein, dass kein Text angezeigt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!