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

CSS テキスト非表示のヒント: text-indent と Clip-path を使用してテキストを非表示にする方法

Web デザインでは、テキストを非表示にする必要がある場合がありますが、display: none; を使用したくない場合があります。完全に削除します。現時点では、CSS はテキストを非表示にする効果を実現するいくつかのテクニックを提供しています。最も一般的に使用されるのは text-indent と Clip-path です。

1. text-indent

text-indent 属性はテキストを左または右に移動できます。負の値に設定すると、テキストを要素の端の外側に隠すことができます。例:

.hide {
    text-indent: -9999px;
}

このスタイルは、要素内のテキストを左側の外側に移動し、テキストの非表示効果を実現します。ただし、この方法は 1 行のテキストにのみ適用され、複数行のテキストの非表示を処理できないことに注意してください。

2.clip-path

clip-path プロパティは、クリッピング パスを使用して、画像と要素の表示部分をクリップします。クリッピング パスを長方形に設定することで、要素内のテキストを長方形の外側から隠すことができます。例:

.hide {
   clip-path: inset(0 0 0 9999px);
}

このスタイルは、要素内のテキストを左側から 9999 ピクセル超えてトリミングし、テキストの非表示効果を実現します。 text-indent と比較して、clip-path メソッドは複数行のテキストの非表示効果を処理できます。

3. text-indent と Clip-path の比較

text-indent と Clip-path を比較して、それぞれの長所と短所をよりよく理解できます。

1. 効果の実現

text-indent: 1 行のテキストの非表示効果に適用されますが、複数行のテキストは処理できません。

clip-path: 複数行テキストの非表示効果に適しており、text-indent よりも柔軟で、より複雑な形状を処理できます。

2. 実装の難しさ

text-indent: 非常に簡単で、text-indent に負の値を設定するだけです。

クリップパス: 比較的複雑です。クリッピング パスを設定するときは形状の複雑さを考慮する必要があり、習得するにはより多くの練習と経験が必要です。

3. 互換性

text-indent: 互換性は非常に優れており、ほぼすべてのブラウザでサポートされています。

clip-path: 互換性は比較的低く、一部のブラウザでは互換性がサポートされていないため、これを解決するには互換性処理メソッドを使用する必要があります。

要約すると、text-indent は単純なテキスト行を非表示にするのに適しており、clip-path はより柔軟でより複雑な形状を処理できますが、より多くの練習と経験が必要です。対処されました。

4. 使用シナリオ

1. 要素内の繰り返しテキストを非表示にする

デザインでは、要素内のテキストの一部を非表示にする必要がある場合があります (例:繰り返しのタイトルや説明テキストなど) ですが、display:none; を使用して完全に削除する必要はありません。現時点では、text-indent または Clip-Path を使用することでニーズを達成できます。

.title {
    text-indent: -9999px;
}

2. ホバー効果の実現

場合によっては、特定の要素内のテキストを非表示にし、マウスが移動したときにのみテキストを表示するホバー効果を実装する必要があります。 text-indent と Clip-path を使用すると、この効果を簡単に実現できます。

.btn {
    text-indent: -9999px;
}

.btn:hover {
    text-indent: 0;
}

.btn {
    clip-path: inset(0 0 0 9999px);
}

.btn:hover {
    clip-path: unset;
}

3. フォーム ラベルのテキストを非表示にする

フォームの設計では、ラベル内のテキストを非表示にし、ユーザーに入力を求めるプレースホルダーのみを使用する必要がある場合があります。現時点では、text-indent または Clip-path を使用することでニーズを達成できます。

input[type="text"] + label {
    text-indent: -9999px;
}

input[type="text"] + label {
     clip-path: inset(0 0 0 9999px);
}

概要

Web デザインでは、テキスト インデントとクリップパスのテクニックが非常に実用的です。これらを使用して、要素内のテキストを非表示にしたり、ホバー効果を実装したり、フォーム ラベル内のテキストを非表示にしたりできます。使いやすいだけでなく互換性も高く、CSSスキルには欠かせないものとなっています。

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