tailwindcss 多行文本自动省略

官网插件

@tailwindcss/line-clamp

安装

yarn add @tailwindcss/line-clamp

配置

如果根目录下面没有配置文件tailwind.config.js,使用 npx tailwindcss init这将在项目的根目录下创建一个最小文件 tailwind.config.js：

内容如下:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

在插件配置项增加插件

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/line-clamp'),
    // ...
  ],
}

使用

使用line-clamp-{n} 类定义省略几行

<p class="line-clamp-3">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>

移出类为line-clamp-none

<p class="line-clamp-3 md:line-clamp-none">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>

请注意，除了-webkit-line-clamp之外，line-clamp- {n}还设置了其他属性，例如显示和溢出，这不是由line-clamp-none设置的，因此，根据您要实现的目标，可能需要还可以使用诸如flex或溢出可见之类的实用程序显式覆盖这些属性。

具体的属性是这样的

Class	CSS
`line-clamp-1`	`overflow: hidden;` `display: -webkit-box;` `-webkit-box-orient: vertical;` `-webkit-line-clamp: 1;`
`line-clamp-2`	`overflow: hidden;` `display: -webkit-box;` `-webkit-box-orient: vertical;` `-webkit-line-clamp: 2;`
`line-clamp-3`	`overflow: hidden;` `display: -webkit-box;` `-webkit-box-orient: vertical;` `-webkit-line-clamp: 3;`
`line-clamp-4`	`overflow: hidden;` `display: -webkit-box;` `-webkit-box-orient: vertical;` `-webkit-line-clamp: 4;`
`line-clamp-5`	`overflow: hidden;` `display: -webkit-box;` `-webkit-box-orient: vertical;` `-webkit-line-clamp: 5;`
`line-clamp-6`	`overflow: hidden;` `display: -webkit-box;` `-webkit-box-orient: vertical;` `-webkit-line-clamp: 6;`
`line-clamp-none`	`-webkit-line-clamp: unset;`

扩展配置

插件同样支持对其扩展,例如新增行数和响应式支持等功能点

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      lineClamp: {
        7: '7',
        8: '8',
        9: '9',
        10: '10',
      }
    }
  },
  variants: {
    lineClamp: ['responsive', 'hover']
  }
}