Home >Web Front-end >JS Tutorial >How Can I Hide Text in HTML Without Using HTML Tags?

How Can I Hide Text in HTML Without Using HTML Tags?

Linda Hamilton
Linda HamiltonOriginal
2024-12-03 06:28:10582browse

How Can I Hide Text in HTML Without Using HTML Tags?

Hiding Text without HTML Tags in HTML

Problem:

Consider the following HTML code:

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

It is required to hide the text "Enter" that follows the "p" tag, but it is not feasible to enclose it with HTML tags. Therefore, alternative solutions, such as CSS or JavaScript, are needed.

Solution Using CSS:

A CSS hack can be applied to achieve the desired result:

.entry {
  font-size: 0;
}

.entry * {
  font-size: initial;
}

By setting the font-size of the parent element ".entry" to 0, all its child elements will inherit the same size. However, by setting the font-size of all the child elements within ".entry" back to "initial," they will regain their original font size, effectively hiding the text "Enter."

HTML Code with CSS Applied:

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

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn