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

Question

有没有办法使用

text-overflow: ellipsis

想到了Tailwind CSS Framework

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

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

而不是

&__title {
    text-overflow: ellipsis;
}

Answer 1

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

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

overflow: hidden; 
white-space: nowrap; 

您可以使用 .truncate class 来实现。这是 Tailwind documentation.

中的 link

初始问题的解决方案：

&__title {
    @apply truncate;
}

Answer 2

使用class截断

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

见https://tailwindcss.com/docs/word-break/#app

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

Answer 3

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

Answer 4

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

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