CSSでコンテンツを非表示にする方法

CSS でコンテンツを非表示にする方法: 1. "text-indent:-9999px;" を使用します; 2. "line-height:0;" を使用します; 3. "display:none" を通して; 4. を通して" overflow:hidden"; 5. 「position」を通じてコン​​テンツを非表示にします。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター

テキスト コンテンツを非表示にする 6 つの方法CSS

Web フロントエンド開発者として、HTML をセマンティックにするために、ページをより意味のあるものにするためにコンテンツ モジュールにいくつかのタイトルを追加する必要があることがよくあります。画像ボタン。CSS ストリーキングなし。ページ情報もスムーズに吸収できます。通常、より良い視覚効果を伝えるために、フォントの代わりに画像を使用することがよくあります。ただし、初期のフロントエンド開発では、  を使用して HTML でコンテンツを直接提供しないことがよくありました。 ; (または空の場合も)、このように、css に読み込まれていない場合、このブロックの内容を知ることは不可能です

トピックから始めて、フォントをオフセットする通常の方法は次のとおりです。

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

ただし、これには制限があります。これはブロックレベルの要素ブロックにのみ適用され、フォントを でオフセットしたいことがよくあります。 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 のバイト数が多くなります。これを 1 つのボタンに使用することをお勧めします。

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

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

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:

これはより合理的で私のお気に入りの方法であり、具体的なコードは次のとおりです:

以下は引用内容です:

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

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

6. positon:absolute:

絶対位置を使用して、表示領域の外に押し出します。ただし、可視性は存在しませんが、物理的なスペースを占有しており、隠されています。テキストの目的は

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

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

.texthidden{
positon:absolute;
margin-top:-9999px;
margin-left:-9999px;
}

Note : 次の 3 つの方法でもテキストを非表示にする効果が得られますが、お勧めしません。

推奨学習: 「css ビデオ チュートリアル 」

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