Wie kann ich unmarkierten Text in HTML mithilfe von CSS oder JavaScript ausblenden?

Unmarkierten Text in HTML ausblenden

Es kann vorkommen, dass Sie HTML-Code mit Text haben, dem keine umgebenden HTML-Tags fehlen. Das Ausblenden dieses Texts kann eine Herausforderung sein, insbesondere wenn es nicht möglich ist, den Text mit einem div-Tag oder einem anderen Tag zu umschließen. Lassen Sie uns dieses Problem mithilfe von CSS- und JavaScript-Techniken angehen.

CSS-Hack

Eine Lösung besteht darin, einen CSS-Hack zu verwenden, der auf die Gesamtschriftgröße eines bestimmten Elements abzielt:

.entry {
  font-size: 0;
}

.entry * {
  font-size: initial;
}

In diesem Code wird .entry-Elementen die Schriftgröße 0 zugewiesen, wodurch der gesamte darin enthaltene Text effektiv ausgeblendet wird. Dies kann jedoch in Situationen unerwünscht sein, in denen andere Elemente in .entry ihre ursprüngliche Schriftgröße beibehalten sollen. Um bestimmten Text selektiv auszublenden, können Sie einen verschachtelten Selektor hinzufügen:

.entry .hidden-text {
  font-size: 0;
}

Dieser Ansatz zielt nur auf Elemente mit der .hidden-text-Klasse ab und verbirgt sie.

JavaScript

Alternativ können Sie JavaScript verwenden, um das DOM dynamisch zu manipulieren und das gewünschte Ergebnis zu erzielen. Sie könnten beispielsweise den folgenden JavaScript-Code verwenden:

document.querySelector("div.entry p:nth-child(2)").style.display = "none";

In diesem Code wählen wir den zweiten Absatz (p:nth-child(2)) innerhalb des .entry-Div aus und setzen seine Anzeigeeigenschaft auf „none“, wodurch es effektiv ausgeblendet wird.

Die Wahl zwischen CSS und JavaScript hängt von den spezifischen Anforderungen Ihrer Situation ab. Wenn es wichtig ist, Text selektiv auszublenden, ist CSS möglicherweise die bessere Option. Wenn Sie den Text hingegen basierend auf bestimmten Bedingungen oder Benutzerinteraktionen dynamisch ausblenden müssen, ist JavaScript besser geeignet.

Das obige ist der detaillierte Inhalt vonWie kann ich unmarkierten Text in HTML mithilfe von CSS oder JavaScript ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!