有没有办法使用
text-overflow: ellipsis
我想使用顺风约定,如:
&__title {
@apply text-overflow-ellipsis;
}
代替
&__title {
text-overflow: ellipsis;
}
有没有办法使用
text-overflow: ellipsis
我想使用顺风约定,如:
&__title {
@apply text-overflow-ellipsis;
}
代替
&__title {
text-overflow: ellipsis;
}
CSS 属性text-overflow: ellipsis;
不能单独使用。
除了 text-overflow,您还应该使用其他属性,例如:
overflow: hidden;
white-space: nowrap;
您可以使用.truncate
类来实现这一点。这是 Tailwind 文档中的链接。
初始问题的解决方案:
&__title {
@apply truncate;
}
使用类截断
<div class="overflow-hidden truncate w-2">Long long long text</div>
请参阅https://tailwindcss.com/docs/word-break/#app
overflow-hidden
将隐藏重叠,truncate
添加省略号和可选的w-2
设置宽度
用宽度截断,例如:
<div className="truncate w-32 text-left text-lightBlack capitalize">display name</div>