CSSテキストを非表示にする方法

CSS テキストの非表示方法: 1. [text-indent:-9999px;] メソッドを使用する; 2. [line-height:0;] メソッドを使用する; 3. スパンを追加する; 4. [display :] を使用するnone] メソッド; 5. [overflow:hidden] メソッドを使用します。

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。

CSS テキストを非表示にする方法:

1. text-indent:-9999px を使用します;

しかし、彼は制限は、ブロック レベルの要素 block にのみ適用されることであり、a のフォントをオフセットしたいことがよくあるため、text-indent:-9999px; という問題が発生します。ただし、この方が使いやすいですが、a をブロックに変換します。後ろの要素が次の行に追いやられることがよくありますが、このaの後ろにaボタンがある場合、後ろに群衆を表示するにはfloatでフロートさせなければなりません。これは少し面倒ではありませんか?

2. line-height:0;

コードは次のとおりです:

font-size:0;
overflow:hidden;

により、背景上のフォントを完全に「非表示」にできます

IE6.0、7.0、8.0、Firefox 3.010 でテスト済み

# 3 番目に、最も便利な方法は、スパンを追加してから、display:none を実行することです。これでバグは発生しません。こちらです。

残念ながら、タグがもう 1 つあります。ループで使用すると、HTML のバイト数が多くなります。単一のボタンにはこの方法で使用することをお勧めします。

入力値を非表示にする方法は少し難しいです。

したがって、非表示をシミュレートするには、ブロックとテキストインデントを「オフセット」に使用することしかできません。

display:block;
font-size:0;
line-height:0;
text-indent:-9999px;

テスト済み IE6 .0、7.0、firefox 3.010 から

4. display:none: コンテナ自体を含むすべてを非表示にすることができ、シンプルかつ効果的ですが、次の 2 つがあります。は検索エンジンにとって不親切であり、スクリーン リーダーによって無視されます。

5. overflow:hidden:

これはより合理的で私のお気に入りの方法であり (Script House Web マスターからのメモ)、具体的なコードは次のとおりです:

以下は引用された内容です:

コードは次のとおりです:

.texthidden{
display:block;/*统一转化为块级元素*/
overflow:hidden;
width:0;
height:0;
}

#関連チュートリアルの推奨事項:

#CSSビデオチュートリアル

以上がCSSテキストを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。