line-clamp

テキストを特定の行数でクランプするためのユーティリティ。

クラススタイル

クラス	スタイル
`line-clamp-<number>`	`overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <number>;`
`line-clamp-none`	`overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: unset;`
`line-clamp-(<custom-property>)`	`overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(<custom-property>);`
`line-clamp-[<value>]`	`overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <value>;`

line-clamp-<number>

overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <number>;

line-clamp-none

overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: unset;

line-clamp-(<custom-property>)

overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(<custom-property>);

line-clamp-[<value>]

overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <value>;

例

line-clamp-<number> ユーティリティ（line-clamp-2 や line-clamp-3 など）を使用して、複数行のテキストを特定の行数で切り捨てます。

以前に適用した line-clamp ユーティリティを解除するには、line-clamp-none を使用します。

<p class="line-clamp-3 lg:line-clamp-none">
  <!-- ... -->
</p>

次の line-clamp-[<value>] 構文を使用して、行数を設定します。完全にカスタムな値に基づいて

<p class="line-clamp-[calc(var(--characters)/100)] ...">
  Lorem ipsum dolor sit amet...
</p>

CSS変数には、次のものも使用できます。 line-clamp-(<custom-property>) 構文

<p class="line-clamp-(--my-line-count) ...">
  Lorem ipsum dolor sit amet...
</p>

これは単なるショートハンドで、 line-clamp-[var(<custom-property>)] var() 関数を自動的に追加します。

プレフィックスa line-clamp ユーティリティ md: のようなブレークポイントバリアントを付けると、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみになります。

<div class="line-clamp-3 md:line-clamp-4 ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。