CSS のみを使用して HTML 内のタグなしテキストを非表示にするにはどうすればよいですか?

HTML で HTML タグのないテキストを非表示にする

問題:

を含む HTML コードがあります。周囲の HTML タグが欠落しているテキスト。具体的には、「p」タグの直後にあるテキスト「Enter」を非表示にします。ただし、テキストを HTML 要素で囲むことはできません。

解決策: CSS フォント サイズのトリック

目的を達成するには、CSS ハックを使用できます。 font-size プロパティを利用します:

1. クラスを作成します。 ".entry" を指定し、それにフォント サイズ 0 を割り当てます:

.entry {
  font-size: 0;
}

2. このクラス内に、ワイルドカード セレクター ("*") を追加して、フォント サイズを元のサイズに設定します。初期値:

.entry * {
  font-size: initial;
}

デフォルトでは、すべての要素は親のフォント サイズを継承します。ただし、「.entry」クラスのフォント サイズを 0 に設定すると、そのすべての子要素が事実上非表示になります。ワイルドカード セレクターは、ネストされた要素のこの設定をオーバーライドして、テキストを表示できるようにします。

例:

コード内で、「.entry」クラスを適用します。親 div に追加し、「Enter」テキストがこのクラス内にあることを確認します:

<div>

この CSS トリックでは、 「Enter」テキストは非表示になりますが、「.entry」クラス内の残りのコンテンツは表示されたままになります。

以上がCSS のみを使用して HTML 内のタグなしテキストを非表示にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。