TailwindCSS 支持文本文字超長溢出截斷、文字文本省略號

前言

文本文字超長截斷并自動補充省略號，這是前端日常開發工作中常用的樣式設置能力，文字超長截斷主要分為單行超長截斷和多行超長截斷。本文通過介紹基本CSS樣式、tailwindcss 類設置兩種基礎方式來實現文字超長截斷。

TailwindCSS 設置

單行文字超長截斷

tailwindcss 多個基礎類組裝

<div class="overflow-ellipsis overflow-hidden whitespace-nowrap">測試測試測試測試測試測試</div>

tailwindcss 直接設置特定類 truncate

<div class="truncate">測試測試測試測試測試測試</div>

TailwindCSS 支持文本文字超長溢出截斷

多行文字超長截斷

如果你想支持多行文本超長截斷，可以通過使用 tailwind-line-clamp插件來實現。

參考如下具體步驟

安裝 npm 依賴包；

npm install tailwindcss-line-clamp -D

tailwindcss.config.js 配置插件；

// tailwind.config.jsmodule.exports = {...,plugins: [require("@tailwindcss/line-clamp"),],
};

設置目標行數的類.line-clamp-{n}，可以將本本限制在指定的行數。比如設置文本超出兩行后截斷添加省略號；

<div class="line-clamp-2">測試測試測試測試測試測試</div>

TailwindCSS 支持文本文字超長溢出截斷、文字文本省略號

基本CSS設置

css處理文字截斷是通過text-overflow屬性實現，用于指定元素中文本溢出時如何進行截斷。

單行文字超長截斷

.text {white-space: nowrap; /* 防止文本換行 */overflow: hidden; /* 隱藏溢出文本 */text-overflow: ellipsis; /* 使用省略號截斷溢出文本 */
}

多行文字超長截斷

對于多行文本末尾省略號，通過設置 -webkit-line-clamp屬性來指定行數。

.text {display: -webkit-box; /* 將元素作為彈性伸縮盒子展示 */-webkit-line-clamp: 2; /* 限制文本行數為 2 行 */-webkit-box-orient: vertical; /* 設置伸縮盒子為垂直方向 */overflow: hidden; /* 隱藏溢出文本 */text-overflow: ellipsis; /* 使用省略號截斷溢出文本 */
}