ホームページ > 記事 > ウェブフロントエンド > 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テキストを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。