11

有没有办法使用

text-overflow: ellipsis

思考Tailwind CSS 框架

我想使用顺风约定,如:

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

代替

&__title {
    text-overflow: ellipsis;
}
4

4 回答 4

13

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

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

overflow: hidden; 
white-space: nowrap; 

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

初始问题的解决方案:

&__title {
    @apply truncate;
}
于 2018-11-27T13:08:32.837 回答
4

使用类截断

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

请参阅https://tailwindcss.com/docs/word-break/#app

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

于 2020-04-10T21:19:19.517 回答
1

Tailwindtruncate只会截断一行,并包含以下内容:

在此处输入图像描述

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

在此处输入图像描述

于 2022-02-19T00:59:36.527 回答
0

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

于 2021-07-12T16:42:17.437 回答