CSSで文字を表示しないように設定する方法

CSS でテキストを表示しないように設定する方法: 1. text-indent 属性を使用する; 2. line-height 属性を使用する; 3. spam 表示属性を使用する; 4. display:none を使用する; 4. 5. overflow:hidden を通じて; 6. position 属性を通じて。

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

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

Web フロントエンド開発者として、HTML のセマンティックを実現するために、多くの場合、CSS にいくつかのタイトルを追加する必要があります。 content モジュールを使用して、ページをより面白くします。もちろん、画像ボタンは、CSS ストリーキングなしでページ情報をスムーズに吸収することもできます。通常、より良い視覚効果を伝えるために、フォントの代わりに画像を使用することがよくあり、フロントエンド開発の初期段階では多くの場合、コンテンツは HTML で直接指定されるのではなく、  (または空の場合もあります) で指定されます。このように、CSS にロードされていない場合、このブロックのコンテンツが何であるかを知ることは不可能です。

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

1. text-indent:-9999px;

を使用します。ただし、制限があります。ブロックレベルにのみ適用されます。 a のフォントなので、text-indent:-9999px; という問題が発生します。この方が使いやすいですが、a がブロックに変換されると、その背後にある要素が次の行にプッシュされます。もしこれが a だったら、その後ろに a ボタンがあります。その後ろに人が集まるように、このボタンをフローティングする必要があります。これは少し面倒ではありませんか?

2. line-height:0;

を使用します。コードは次のとおりです。

font-size:0;

overflow:hidden;

Can背景上のフォントを完全に「非表示」にします。

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:

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

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

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

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

6. positon:absolute:

絶対位置を使用して表示領域の外に押し出しますが、可視性は存在しませんが、依然として物理的なスペースを占有しており、テキストを非表示にするという目的に反しています。

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

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

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

注: 次の 3 つの方法でも、隠しテキスト効果を実現できますが、お勧めできません。

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

以上がCSSで文字を表示しないように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。