tailwindcss-line-clamp-no-ellipsis

這是一個不帶刪節號（...，或稱為「省略號」）的文字段落截斷 Tailwind 插件。

此插件發想於 tailwind 的 tailwindlabs/tailwindcss-line-clamp 插件，此插件後來合併至 tailwind 核心套件。

大多數情況下，我們希望將文字段落以特定行數截斷，並在最後添加刪節號「...」。但有時我們只希望截斷文字段落，而不帶刪節號。

範例

	原始	帶刪節號	不帶刪節號
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'),
    // ...
  ],
  // ...
}

使用方式

使用 CSS class 名稱 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 如下：

Class	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>