Tailwind: 文本溢出：省略号？

Question

有没有一种方法可以使用？

text-overflow: ellipsis

想要使用Tailwind CSS框架

我希望采用tailwind的约定，例如：

&__title {
    @apply text-overflow-ellipsis;
}

不是

&__title {
    text-overflow: ellipsis;
}

- Ced

---

谢谢您的评论，是的我已经对Tailwind文档进行了大量的搜索，但不幸的是，我未能找到任何解决方案。 - Ced

text-overflow: ellipsis; 不能单独使用，除了 text-overflow 之外，你还应该使用其他属性，比如 overflow: hidden; white-space: nowrap;。你可以使用 .truncate 类来实现这一点。以下是文档链接：https://tailwindcss.com/docs/whitespace-and-wrapping - AKNair

@AKNair，你应该将这个评论写成一个答案，这样OP就可以接受它了。 - Mihai T

我做到了，感谢你们两位的帮助！ - Ced

同志们，能不能让Stack Overflow社区停止无缘无故地降低问题的评分... - Ced

Answer 1

CSS属性text-overflow: ellipsis;不能单独使用。

除了text-overflow之外，您还应该使用其他属性：

overflow: hidden; 
white-space: nowrap; 

您可以使用.truncate类来实现此目的。这是 Tailwind文档 的链接。

初始问题的解决方案：

&__title {
    @apply truncate;
}

- AKNair

---

嘿！我被禁止提问了，我觉得这个惩罚太严厉了。我需要积极的赞成票，你能帮我完成我的长期目标吗？只需给我一个赞，因为如果结果是负面的，我将不能再提问，而另一方面，我也无法删除任何问题，因为我已经接受并赞同了您的精彩答案，所以我感到很困难和不满。谢谢你的理解，祝你有愉快的一天! - Ced

Answer 2

使用类名为 truncate

<div class="overflow-hidden truncate w-2">Long long long text</div>

请查看https://tailwindcss.com/docs/word-break/#app

overflow-hidden可以隐藏重叠部分，truncate可以添加省略号，可选的w-2可设置宽度

- Honza

---

Tailwind中的truncate包括overflow-hidden，因此无需手动编写它。 - PatricNox

Answer 3

Tailwind的truncate只会截断一行，并且默认提供以下选项:

如果您需要更灵活地控制行数，建议安装tailwindcss-line-clamp ，并使用line-clamp-X，其中也包含所需的所有内容。

- ahmedhosny

---

值得一提的是，tailwindcss/line-clamp 是官方的 Tailwind CSS 插件。这里有一个很好的解释器，介绍如何使用它：https://tailwindcss.com/blog/multi-line-truncation-with-tailwindcss-line-clamp。 - Ben

从Tailwind CSS v3.3版本开始，line-clamp实用工具现在默认包含在框架中，不再需要此插件。 - undefined

从Tailwind CSS v3.3版本开始，line-clamp实用工具现在已经默认包含在框架中，不再需要此插件。 - Dr. House

Answer 4

按宽度截断 例如： <div className="truncate w-32 text-left text-lightBlack capitalize">显示名称</div>

- Kiran Raj R