tailwindcss-line-clamp-no-ellipsis

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

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

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

範例

| | 原始 | 帶刪節號 | 不帶刪節號 |
| ------------ | -------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------ |
| Html |

|

...

|

...

|
| 結果（英文） | !en original | !en with ellipsis | !en without ellipsis |
| 結果（中文） | !ch original | !ch with ellipsis | !ch without ellipsis |
| 結果（日文） | !jp original | !jp original | !jp without ellipsis |

安裝

安裝插件：

``sh
npm install tailwindcss-line-clamp-no-ellipsis
`

於 tailwind.config.js 設定檔中，加入插件：

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

使用方式

使用 CSS class 名稱 line-clamp-no-ellipsis-{截斷行數}，「截斷行數」填入欲截斷的行數：

`html



`

欲解除文字段落的截斷，使用line-clamp-no-ellipsis-none，範例如下：

`html



`

插件提供的截斷選項為 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 鍵底下，新增更多的行數選項，如下所示：

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

加入後，即可馬上使用！

`html



``