この記事では、Tailwind でテキストをクランプする手順を説明します。
テキストを特定の行数に固定するにはどうすればよいですか?
Tailwind の行クランプ クラスは、ブロック内のテキスト コンテンツを特定の行数に制限します。こうすることで、テキストブロックはクラスで指定した行数以降のテキストを非表示にします。 Web ページで使用すると、テキスト情報があることをユーザーに表示したり、Web ページの飽和を避けるために不要なテキストをすべて非表示にしたりできます。
構文
以下の構文は「」で提供されています。 クラス 要素の「」属性を使用してラインクランプを適用します。
上記で定義された構文では、ユーザーは「」からの数字を使用できます。 1～6 」 デフォルトの行クランプ クラスを使用します。たとえば、「 ラインクランプ-1 ” クラスでは、テキストの内容が 1 行を超えることはできません。
いくつかの例を通して「ラインキャンプ」クラスの概念を理解しましょう。
例 1: 行クランプ クラスを使用してコンテンツを特定の行数に制限する
以下のように、Tailwind の行クランプ クラスを使用して、テキスト コンテンツを 3 行に制限しましょう。
< ディビジョン クラス = 「rounded-lg flex justify-center bg-slate-200 m-5 p-4」 >
< p クラス = 「ラインクランプ-3 w-72」 > これはサンプルの段落です。 3行分だけ表示されます。それ以降のコンテンツはすべて非表示になります。これは、Tailwind のライン クランプ クラスによるものです。 < / p >
< / ディビジョン >
上記のコードの説明は次のとおりです。
- 「 ディビジョン 」要素は、「」を使用して角が丸いように作成されます。 丸みを帯びたLG ' クラス。 「」を使用してマージンとパディングを提供します。 m-{数字} 「＆」 p-{数値} ' クラス。
- 次に、div 要素内の要素を「」を使用して中央に配置します。 中央揃え ”クラス、そして” フレックス ” クラスは、div の子要素を含むコンテナを作成します。
- ” bg-{色}-{数字} ”クラスはdiv要素の背景色を設定します。
- 「 」タグが作成され、テキストコンテンツが含まれます。 「」を使用して固定幅が提供されます。 w-{数値} ' クラス。
- 最後に「」の本文内容です。 p ” 要素は、” を使用して 3 行に制限されています ラインクランプ-3 ' クラス。
出力
出力では、指定された 3 行の制限を超えたテキスト コンテンツが非表示になっていることがわかります。
例 2: Tailwind でデフォルト状態のライン クランプ クラスを使用する
Tailwind は、デザイン レイアウトをより動的にするために使用できる要素のさまざまなデフォルト状態を提供します。開発者は、これらの状態を持つ任意の Tailwind クラスを使用して、その状態が達成されるたびに指定されたデザイン プロパティを要素に提供できます。同様に、「line-clamp」クラスもこれらのデフォルトの Tailwind 状態で使用できます。
Tailwind の状態で「line-clamp」クラスを使用するための構文を以下に示します。
{ 州 } : ラインクランプ- { 番号 }以下に説明する 3 つのデフォルト状態があります。
- ホバー: ユーザーが要素の上にマウス カーソルを置いたときの要素の状態です。
- 集中： 要素にフォーカスが当たっている状態です。たとえば、ユーザーは「tab」キーを押して要素に移動します。
- アクティブ： 要素がユーザーによってアクティブ化されたときの状態。
以下のデモでは、すべてが前の例と同じです。唯一の違いは、ラインクランプ クラスに「 ホバリング ' 州：
< ディビジョン クラス = 「rounded-lg flex justify-center bg-slate-200 m-5 p-4」 >< p クラス = 「hover:line-clamp-3 w-72」 > これはサンプルの段落です。 3行のみ表示されます。それ以降のコンテンツはすべて非表示になります。これは、Tailwind の lin クランプ クラスによるものです。 < / p >
< / ディビジョン >
「」に注意してください。 「」クラスは「」によって提供されます。 ホバー:ラインクランプ-3 」クラスを使用すると、ユーザーがコンテンツ ボックス上にマウス カーソルを置くたびに、テキスト コンテンツが 3 行に制限されます。
出力
以下の出力では、マウス カーソルがブロック上にあるときに行クランプ プロパティが適用されることがわかります。
例 3: ブレークポイントのあるライン クランプ クラスの使用
ブレークポイントは、ユーザーがレスポンシブ デザイン レイアウトを作成するのに役立つ、Tailwind のメディア クエリです。 Tailwind には、事前に定義された最小幅を持つ 5 つのデフォルト ブレークポイントが用意されています。開発者は、これらのブレークポイントでライン クランプ クラスを使用することもできます。
ブレークポイントを含む行クランプ クラスを使用するための構文は次のとおりです。
{ ブレークポイントのプレフィックス } : ラインクランプ- { 番号 }上記の構文で言及されている「ブレークポイント プレフィックス」は次のとおりです。
- sm: このブレークポイントの最小幅は 640px です。
- MD: このブレークポイントの最小幅は 768 ピクセルです。
- lg: このブレークポイントの最小幅は 1024 ピクセルです。
- XL: このブレークポイントの最小幅は 1280 ピクセルです。
- 2xl: このブレークポイントの最小幅は 1536px です。
以下に示すデモでは、「 p ” 要素には、異なるブレークポイント上の異なる行クランプ クラスが提供されます。これにより、新しいブレークポイントに到達するたびに、テキスト ブロックの行クランプ プロパティが変更されます。
< ディビジョン クラス = 「rounded-lg flex justify-center bg-slate-200 m-5 p-4」 >< p クラス = 「ラインクランプ-1 lg:ラインクランプ-3 md:ラインクランプ-2 sm:ラインクランプ-1 w-72」 > これはサンプルの段落です。 3行分だけ表示されます。それ以降のコンテンツはすべて非表示になります。これは、Tailwind の lin クランプ クラスによるものです。 < / p >
< / ディビジョン >
p 要素には、デフォルトで「line-clamp-1」クラスが提供されます。ただし、「p」要素内のテキスト内容は「」の場合は 1 行に制限されます。 sm ” ブレークポイント、” の 2 行 MD ” ブレークポイントと、” の 3 行 LG ” ブレークポイント。
出力
出力から、画面サイズの変化に応じてテキスト ブロックの line-clamp プロパティが変化することは明らかです。
Tailwind でテキストを特定の行数に固定する手順を示しました。
結論
Tailwind の行クランプ クラスは、要素のテキスト コンテンツを指定された行数に制限します。 「lin-clamp-{number}」クラスは、テキストを限られた行にクランプするための構文として使用されます。ライン クランプ クラスは、Tailwind の事前定義されたブレークポイントおよび状態バリアントとともに使用できます。この記事では、テキストを指定した行数に固定する手順を説明しました。