tailwindcss插件：line-clamp 限制文本的行数并显示省略号

line-clamp

line-clamp 用于限制文本的行数并显示省略号

tailwindcss v3.3 开始默认包含 line-clamp 插件

安装：

sh

pnpm add -D @tailwindcss/line-clamp

1

修改 tailwind.config.cjs：

js

module.exports = {
  // ...其他配置
  plugins: [
    // ...其他插件
    require('@tailwindcss/line-clamp'),
  ],
}

使用：

• 使用 line-clamp-{n} 指定行数（n 默认最大为 6）
• 使用 line-clamp-none 取消行数限制

html

<p class="line-clamp-1">hello world</p>

tailwind 中文文档：

https://www.tailwindcss.cn/docs/installation

tailwind 训练场

https://play.tailwindcss.com/