【tailwindcss】多行溢出省略

最新推荐文章于 2024-10-04 17:24:00 发布

心宽体胖的米六

最新推荐文章于 2024-10-04 17:24:00 发布

阅读量1.3k

点赞数 9

分类专栏： tailwindcss 文章标签：前端 css

本文链接：https://blog.csdn.net/Me_FF/article/details/136143987

版权

tailwindcss 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了CSS的line-clamp属性，用于文本超出指定行数后自动截断并添加省略号，同时展示了如何在TailwindCSS配置文件中自定义不同行数的显示效果，以及响应式和hover变异的应用。

摘要由CSDN通过智能技术生成

类名

类名	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']
  }
}