CSS Line Clamp ジェネレーター

CSS line-clampでテキストの行数を制限し、省略表示を実現。-webkit-line-clampを使用した複数行省略のコードを生成します。

表示行数

1行3行10行

数値入力

現代的な構文を使用

生成されたCSS

サンプルテキスト

プレビュー

これはテキストの行数制限デモです。この長い文章は指定した行数で切り取られ、末尾に省略記号（...）が表示されます。複数行のテキストを制限したい場合に便利なCSSテクニックです。line-clampプロパティを使用することで、簡単に実装できます。

HTML構造例

<div class="text-clamp">
  これはテキストの行数制限デモです。この長い文章は指定した行数で切り取られ、末尾に省略記号（...）が...
</div>

CSS Line Clampとは？

CSS line-clamp（-webkit-line-clamp）は、テキストを指定した行数で切り取り、末尾に省略記号（...）を表示する機能です。カードUIやリストアイテムで長いテキストを整列させるのに便利です。

-webkit-プレフィックスが必要ですが、Chrome、Safari、Firefox、Edgeなど主要ブラウザで広くサポートされています。 display: -webkit-box と -webkit-box-orient: vertical との組み合わせが必須です。