【tailwindcss】多行溢出省略

类名

类名	css作用
line-clamp-1	文本超出 1 行后截断并添加省略号
line-clamp-2	文本超出 2 行后截断并添加省略号
line-clamp-3	文本超出 3 行后截断并添加省略号
line-clamp-4	文本超出 4 行后截断并添加省略号
line-clamp-5	文本超出 5 行后截断并添加省略号
line-clamp-6	文本超出 6 行后截断并添加省略号
line-clamp-none	取消文本超出隐藏效果

例子

<p class="line-clamp-2">
  这是一段使用了line-clamp-2类名的效果，多行文本超出截断换行的例子
  这是一段使用了line-clamp-2类名的效果，多行文本超出截断换行的例子
  这是一段使用了line-clamp-2类名的效果，多行文本超出截断换行的例子
</p>

自定义

在 tailwind.config.js 配置生成的值

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