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

Question

有没有办法使用

text-overflow: ellipsis

我想使用顺风约定，如：

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

代替

&__title {
    text-overflow: ellipsis;
}

Answer 1

使用类截断

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

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

Answer 2

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

除了文本溢出之外，您还应该使用其他属性，例如：

overflow: hidden; 
white-space: nowrap;

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

初始问题的解决方案：

&__title {
    @apply truncate;
}

嘿！我被禁止提问，我觉得这个制裁很严厉。我需要积极的支持，先生，您可以通过支持我的问题来帮助我完成漫长的追求吗，因为负面结果会让我阻止提出更多问题，而另一方面，我无法删除任何问题，因为我已经接受并支持了您的精彩答案，所以我被困住了并且感觉很糟糕。感谢您的理解，祝您有美好的一天！ (5认同)

Answer 3

Tailwindtruncate只会截断一行，并包含以下开箱即用的内容：

如果您需要行数的灵活性，我建议安装tailwindcss-line-clamp并使用 line-clamp-X，其中也包含您需要的一切。