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

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类来实现此目的。这是 Tailwind documentation.

的链接

最初问题的解决方案：

&__title {
    @apply truncate;
}

Answer 2

使用截断类

<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>