如何在Tailwind CSS中为长段落添加多行省略号？

你之前的代码只适用于单行文本省略，因为whitespace-nowrap会强制文本不换行，所以多行场景下肯定无效。要实现多行省略，需要用Tailwind的line-clamp-{n}工具类，搭配必要的溢出控制类。

正确的写法如下：

<h1 class="overflow-hidden text-ellipsis line-clamp-4">
  Hybrid design is starting to become the norm in offices these days with employees gradually returning to their offices. Hybrid design is starting to become the norm in offices these days with employees gradually returning to their offices. Hybrid design is starting to become the norm in offices these days with employees gradually returning to their offices.
</h1>

关键说明： #

• 删掉whitespace-nowrap，这个属性会阻止文本换行，和多行省略逻辑冲突
• line-clamp-4是核心：它会自动帮你设置-webkit-line-clamp: 4、display: -webkit-box、-webkit-box-orient: vertical这三个必要属性，不需要手动写CSS
• 保留overflow-hidden和text-ellipsis，前者隐藏超出内容，后者触发省略号显示

如果你的Tailwind版本低于v3，可能需要先安装@tailwindcss/line-clamp插件才能使用这个类，不过现在主流都是v3版本，默认已经集成了这个功能。

内容的提问来源于stack exchange，提问作者Ayush Kumar Bhadani