tailwindcss-line-clamp-no-ellipsis

省略記号（...）なしでテキストを行数制限する Tailwind CSS プラグインです。

このプラグインは tailwindlabs/tailwindcss-line-clamp にインスパイアされ、後に Tailwind CSS のコア機能として統合されました。

通常、テキストを特定の行数で切り詰める際、末尾に省略記号「...」を付けます。しかし、省略記号なしでテキストをクリップしたい場合もあります。このプラグインはその用途に応えます。

デモ

	オリジナル	省略記号あり	省略記号なし
Html	<div>...</div>	<div class="line-clamp-2">...</div>	<div class="line-clamp-no-ellipsis-2">...</div>
結果（英語）
結果（中国語）
結果（日本語）

インストール

プラグインをインストールします：

npm install tailwindcss-line-clamp-no-ellipsis

tailwind.config.js にプラグインを追加します：

module.exports = {
  // ...
  plugins: [
    require('tailwindcss-line-clamp-no-ellipsis'),
    // ...
  ],
  // ...
}

使い方

line-clamp-no-ellipsis-{行数} クラスを使って、切り詰める行数を指定します：

<div class="line-clamp-no-ellipsis-2">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit eum illum modi nobis nisi similique quasi obcaecati, ipsa eos quaerat.
</div>

行数制限を解除するには line-clamp-no-ellipsis-none を使用します：

<div class="line-clamp-no-ellipsis-2 md:line-clamp-no-ellipsis-none">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit eum illum modi nobis nisi similique quasi obcaecati, ipsa eos quaerat.
</div>

プラグインは 1〜6 行の制限を提供します。生成される CSS は以下の通りです：

クラス	CSS
line-clamp-no-ellipsis-1	overflow: hidden; max-height: calc(1lh * 1); overflow-wrap: break-word;
line-clamp-no-ellipsis-2	overflow: hidden; max-height: calc(1lh * 2); overflow-wrap: break-word;
line-clamp-no-ellipsis-3	overflow: hidden; max-height: calc(1lh * 3); overflow-wrap: break-word;
line-clamp-no-ellipsis-4	overflow: hidden; max-height: calc(1lh * 4); overflow-wrap: break-word;
line-clamp-no-ellipsis-5	overflow: hidden; max-height: calc(1lh * 5); overflow-wrap: break-word;
line-clamp-no-ellipsis-6	overflow: hidden; max-height: calc(1lh * 6); overflow-wrap: break-word;
line-clamp-no-ellipsis-none	overflow: unset; max-height: unset;

カスタマイズ

6 行以上の制限を使用する場合は、tailwind.config.js の lineClamp キーにカスタム設定を追加します：

module.exports = {
  theme: {
    extend: {
      lineClamp: {
        7: '7',
        8: '8',
      }
    }
  },
}

設定後、すぐに使用できます：

<div class="line-clamp-no-ellipsis-7">   Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit eum illum modi nobis nisi similique quasi obcaecati, ipsa eos quaerat.
</div>