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

Question

有没有办法使用

text-overflow: ellipsis

思考 Tailwind CSS 框架

我想使用顺风约定，如：

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

代替

&__title {
    text-overflow: ellipsis;
}

原文由 Ced 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

 overflow: hidden;
white-space: nowrap;

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

初始问题的解决方案：

 &__title {
    @apply truncate;
}

原文由 AKNair 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Tailwind truncate 只会截断一行，并且包括以下内容：

如果你需要灵活的线数，我建议安装 tailwindcss-line-clamp 并使用 line-clamp-X，它也有你需要的一切。

原文由 ahmedhosny 发布，翻译遵循 CC BY-SA 4.0 许可协议