How Can I Hide Untagged Text in HTML Using CSS?

Hiding Untagged Text in HTML

In HTML, it's possible to hide text fragments that aren't enclosed by any HTML tags. This text, often referred to as "plain text," can present a challenge to hide using conventional methods.

JavaScipt or CSS?

As the user mentioned, wrapping the text in a div or other tags is impractical. Therefore, alternative methods such as JavaScript or CSS need to be explored.

CSS Hacking

One effective CSS hack for hiding plain text involves manipulating the font size:

.entry {
  font-size: 0;
}
.entry * {
  font-size: initial;
}

By setting the font size of the container div to zero, all elements within that container will also have a font size of zero, effectively hiding them. However, to restore the visibility of the tagged elements, the second CSS rule sets the font size back to its initial value, thus ensuring that only the untagged text remains hidden.

Example:

<div class="entry">
  <p class="page-header"><strong>Enter</strong></p>
  <p>something here</p>
  Enter (this will be hidden !!)
  <div class="subhead">another text here</div>
</div>

By applying the CSS hack to this HTML, the "Enter" text after the "p" tag will be effectively hidden, while the other text within the container will be unaffected.

The above is the detailed content of How Can I Hide Untagged Text in HTML Using CSS?. For more information, please follow other related articles on the PHP Chinese website!