Comment puis-je masquer le texte non marqué en HTML à l'aide de CSS ou de JavaScript ?

Masquage du texte non marqué dans HTML

Vous pouvez rencontrer des situations dans lesquelles vous avez du code HTML avec du texte dépourvu de balises HTML environnantes. Cacher ce texte peut être difficile, surtout s'il n'est pas possible d'envelopper le texte avec un div ou une autre balise. Résolvons ce problème à l'aide de techniques CSS et JavaScript.

CSS Hack

Une solution consiste à utiliser un hack CSS qui cible la taille globale de la police d'un élément spécifique :

.entry {
  font-size: 0;
}

.entry * {
  font-size: initial;
}

Dans ce code, les éléments .entry se voient attribuer une taille de police de 0, masquant ainsi tout le texte qu'ils contiennent. Cependant, cela peut s'avérer indésirable dans les situations où vous souhaitez que d'autres éléments de .entry conservent leur taille de police d'origine. Pour masquer sélectivement un texte spécifique, vous pouvez ajouter un sélecteur imbriqué :

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

Cette approche cible et masque uniquement les éléments avec la classe .hidden-text.

JavaScript

Vous pouvez également utiliser JavaScript pour manipuler dynamiquement le DOM et obtenir le résultat souhaité. Par exemple, vous pouvez utiliser le code JavaScript suivant :

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

Dans ce code, nous sélectionnons le deuxième paragraphe (p:nth-child(2)) dans le div .entry et définissons sa propriété d'affichage sur "aucun", ce qui le cache efficacement.

Le choix entre CSS et JavaScript dépend des exigences spécifiques de votre situation. S'il est essentiel de masquer sélectivement le texte, CSS pourrait être une meilleure option. D'un autre côté, si vous devez masquer le texte de manière dynamique en fonction de certaines conditions ou interactions de l'utilisateur, JavaScript est plus approprié.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!