HTML: Versteckter und Unsichtbarer Text : So gehs

Wenn du mit HTML einen unsichtbaren Text erstellen möchtest, dann kannst du das auf verschiedene Arten machen. In CSS gibt es mehrere Möglichkeiten einen HTML Text zu verstecken und quasi unsichtbar zu machen. Wie das geht zeige ich dir.

HTML Text mit CSS verstecken und „unsichtbar“ machen

Mit display:hidden wird der Text nicht angezeigt, aber er ist auch im HTML Dokument nicht aufgeführt

Beispiel:

1
<div style="display:hidden">Dieser Text ist für keinen zugänglich</div>

Mit visiblity:hidden kannst du wie mit display:none; den Text Unsichtbar machen und verstecken mit dem Unterschied, dass der benötigte Platz für die Inhalte am Bildschirm erhalten (und leer) bleibt.

Beispiel:

1
<div style="visiblity:hidden">Dieser Text ist für keinen zugänglich</div>

Text Farbe als Hintergrundfarbe einstellen

Wenn du nicht möchtest das der Text komplett im HTML Dokument verschwunden ist sondern nur unsichtbar ist dann kannst du einfach die Textfarbe Weiss einstellen

1
<div style="color:#ffffff">Dieser Text weiss und unsichtbar</div>

Anwendungsbeispiel aus der Praxis

Wenn beispielsweise ein Button gedrückt werden soll, ist zunächst die Mitteilung ausgeblendet. Wenn jetzt der Button gedrückt wird die Mitteilung eingeblendet. Aber zunächst ist mittels display:none; der Text versteckt und unsichtbar.

1
2
3
<button aria-expanded="false">Klick mich</button>
...
<p style="display:none;">Infotext wenn Button gedrückt</p>

Fazit

Du kannst in HTML auf verschiedene Weiße mit Hilfe von CSS einen Text verstecken und für den Benutzer unsichtbar machen. Wenn du noch möchtest das der Text im HTML Dokument auftaucht kannst du die Textfarbe der Hintergrundfarbe angleichen. Wenn du möchtest das der Text komplett unterdrückt wird dann verwendest du am besten display:none





weitere Beiträge zum Thema HTML




Schreibe einen Kommentar



24451