Maison >interface Web >tutoriel CSS >Comment puis-je masquer le texte non balisé en HTML en utilisant uniquement CSS ?

Comment puis-je masquer le texte non balisé en HTML en utilisant uniquement CSS ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-25 06:14:16379parcourir

How Can I Hide Un-tagged Text in HTML Using Only CSS?

Masquer le texte sans balises HTML dans HTML

Un utilisateur rencontre un défi lorsqu'une section particulière de texte dans un document HTML n'est pas entourée par toutes les balises HTML. Le but est de masquer ce texte sans l'envelopper dans un div ou un autre élément HTML.

Solution CSS

L'approche recommandée implique un hack CSS qui utilise la taille de la police. :

.entry {
  font-size: 0;
}

.entry * {
  font-size: initial;
}

Lorsqu'il est appliqué au code HTML donné, ce CSS masque efficacement le texte souhaité tout en préservant la visibilité de l'autre elements :

<div class="entry">
  <p class="page-header">

En définissant la taille de police de la classe ".entry" à 0, tous ses éléments enfants sont masqués. La deuxième règle rétablit ensuite sélectivement la taille de la police à sa valeur initiale, rétablissant ainsi la visibilité des éléments souhaités au sein du conteneur « .entry ».

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn