[Tailwind] line-clamp无效原因多行文本省略号 CSS

最新推荐文章于 2025-03-08 11:29:28 发布

RedDragon_Will

最新推荐文章于 2025-03-08 11:29:28 发布

阅读量388

点赞数 5

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/RedDragon_Will/article/details/144607623

tailwind 专栏收录该内容

2 篇文章

订阅专栏

提示: 这里使用的 line-clamp 是tailwind 内置的原子类, 而不是tailwind插件, line-clamp插件,

tailwind 官网 line-clamp 介绍

代码

下面这段代码的核心是 line-clamp-4

<div class="w-32 h-32 border border-lime-300 rounded-xl line-clamp-4 text-xs">
     Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.   </div>
</div>

效果

在这里插入图片描述
很明显, 和我们的预期有差别, 我们希望的结果是只保留4行, 并显示一个省略号

解决方法

这里不应该写h-32, 去掉h-32, 让高度自动由内容撑开就好了

<div class="w-32 border border-lime-300 rounded-xl line-clamp-4 text-xs">
   Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.   </div>
</div>