How Can I Hide Untagged Text in HTML Using Only CSS?

Hiding Text Without HTML Tags in HTML

Problem:

You have HTML code containing text that lacks any surrounding HTML tags. Specifically, you want to hide the text "Enter" located immediately after a "p" tag. However, it's not possible to wrap the text with an HTML element.

Solution: CSS Font-Size Trick

To achieve your goal, you can employ a CSS hack leveraging the font-size property:

1. Create a class, e.g. ".entry", and assign it a font size of 0:

.entry {
  font-size: 0;
}

2. Within this class, add a wildcard selector ("*") to set the font size back to its initial value:

.entry * {
  font-size: initial;
}

By default, all elements inherit the font size of their parents. However, by setting the font size of the ".entry" class to 0, you effectively hide all its child elements. The wildcard selector then overrides this setting for any nested elements, allowing their text to be displayed.

Example:

In your code, apply the ".entry" class to the parent div and ensure that the "Enter" text falls within this class:

<div><p>With this CSS trick, the "Enter" text will be hidden while the rest of the content within the ".entry" class remains visible.</p></div>

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