{ Hide_text } CSS テキスト非表示の概要レポート

{ Hide_text } CSS テキスト非表示の概要レポート

最近まとめたCSSテキスト非表示のデモでは、いくつかの方法をまとめて、最も完璧な解決策を考え出し、それを自分のコード スニペットに組み込もうとしましたが、最終的には結論が何度も覆される状況に陥りました。ブラウザに関係なく、考慮する必要があるアプリケーションのシナリオと要素が非常に多いため、アプリケーションの端末やタグの構造が異なれば、最適なソリューションも異なります。そのため、仕事で「怠惰」になることを望むのではなく、その方が良いでしょう。いつものように基本的な知識を統合して蓄積し、トレードオフが必要なときにさらに便利に使えるようにします。

経験が少ないため、デモ部分に間違いや漏れがあることは避けられません。問題がある場合は、ご指摘いただければ幸いです。

メソッドリストのデモ

1.予約なし：表示：なし

コードスニペット:

(x)HTML

私は醤油のテキストです

CSS

/* 暴力隠蔽*/
.hide_display{表示:なし;}

互換性:

アドバンテージ：

• 便利で速い
• 優れた互換性

欠点:

• スクリーンリーダーが読み取れない
• ハイパーリンクは適用されません
• 画像の代替テキストには他のラベルの背景が必要です
• 検索ランキングに影響を与える
• 広範な使用は SEO 不正行為とみなされる可能性があります

2. 妥協の選択: overflow:hidden/position:absolute/visibility:hidden

コードスニペット:

(x)HTML

醤油テキストナンバーワンは私です

私は醤油テキスト No.2 です

CSS

/* 要素が他の要素に影響を与えないように、要素を非表示にしてテキスト フローから分離します */
.hide_overflow{
高さ:0ピクセル;
オーバーフロー:非表示;
display:block;/* インライン要素は必須です*/
float:left; /* ドキュメント フローから抜け出すか、position:absolute;*/
}
/* 要素が他の要素に影響を与えないように、表示範囲外、テキスト フロー外に配置します*/
.hide_position{
位置:絶対;
左:-32767px;
}
/* 原理は .hide_position と同じです*/
.hide_visibility{
可視性:非表示;
Position:absolute; /* ドキュメント フローから抜け出す*/
マージン左:-32767px;
}