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:

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

<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

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

<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

Jetzt HTML lernen

Weitere Beiträge zu HTML

HTML: Text in Zwischenablage kopieren – So gehts
HTML: Grundgerüst – Webseite erstellen
HTML: Textarea erstellen – So gehts
PHP in HTML einfügen – So gehts!
HTML: Rahmen um Text – So gehts

HTML Datei öffnen – Kostenloser Editor 2021
HTML: Anker erstellen – So wirds gemacht!
HTML: 302 Redirect – So einfach gehts!
HTML: URL Parameter Erklärung
HTML: Bild einfügen – So gehts!

Jquery in HTML einbinden : So wirds gemacht!
HTML: Zurück Button & Link erstellen: So gehts!
HTML: Versteckter und Unsichtbarer Text : So gehs
HTML: Großbuchstaben schreiben: So gehts!
HTML: Icons einfügen: So gehts!

HTML: iFrame in Webseite einbinden – So gehts!
HTML: Liste erstellen – So gehts!
HTML: Erzwungenes Leerzeichen einfügen – So gehts!
CSS in HTML einbinden – So gehts!
HTML: Leerzeichen erstellen – So einfach gehts!

HTML: Auskommentieren – So gehts!
HTML: Bild zentrieren und mittig ausrichten
HTML: Fett schreiben – So einfach gehts!
HTML Text ausrichten: rechtsbündig & linksbündig
HTML: Zeilenabstand einstellen – So gehts!

HTML: Trennlinie einfügen – So gehts!
HTML: Absatz einfügen – So gehts!
HTML: Horizontale Linie – So gehts
HTML: Tabellen erstellen – So gehts!
HTML: Datum & Uhrzeit anzeigen – So gehts!

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

Das könnte dich interessieren!

Weitere Kategorien