顺风：文本溢出：省略号？答案

【问题标题】：Tailwind: text-overflow: ellipsis?顺风：文本溢出：省略号？
【发布时间】：2019-04-29 01:47:33
【问题描述】：

有没有办法使用

text-overflow: ellipsis

我想使用这样的顺风约定：

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

代替

&__title {
    text-overflow: ellipsis;
}

【问题讨论】：

你搜索过关于text-overflow 的文档吗？据我所知，tailwind 使用 @apply .text-transparent 之类的东西作为文本颜色。如果您在文档中找到有关 text-overflow 的内容，那么您可以使用它，否则您将不走运
感谢您的评论，是的，我已经对 Tailwind 文档进行了大量搜索，但遗憾的是我找不到任何解决方案
文本溢出：省略号；不能单独使用，除了 text-overflow 之外，还应该使用其他属性，例如 overflow: hidden;空白：nowrap；还。您可以使用 .truncate 类来实现这一点。这是文档中的链接：tailwindcss.com/docs/whitespace-and-wrapping
@AKNair 您应该在答案中写下此评论，以便 OP 可以接受它
我做到了，感谢你们的帮助！

【解决方案1】：

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

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

overflow: hidden; 
white-space: nowrap;

您可以使用.truncate 类来实现这一点。这是来自 Tailwind documentation.的链接

初始问题的解决方案：

&__title {
    @apply truncate;
}

【讨论】：

嘿！我被禁止提问，我觉得这个制裁很严厉。我需要积极的支持，请先生通过支持我的问题来帮助我完成我的长期追求，因为负面结果让我阻止我提出更多问题，另一方面我不能删除任何问题，因为我已经接受并支持你的真棒答案，所以我被困住了，感觉很糟糕。感谢您的理解，祝您有美好的一天！

【解决方案2】：

使用类截断

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

overflow-hidden 将隐藏重叠，truncate 添加省略号和可选w-2 设置宽度

【讨论】：

【解决方案3】：

按宽度截断例如： <div className="truncate w-32 text-left text-lightBlack capitalize">display name</div>

【讨论】：