Tailwind: text-overflow: ellipsis?

css overflow tailwind-css

Ced · Nov 27, 2018 · Viewed 9.6k times · Source

Is there a way to use

text-overflow: ellipsis

I would like to use the tailwind convention like :

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

Instead of

&__title {
    text-overflow: ellipsis;
}

Answer

CSS property text-overflow: ellipsis; cannot be used alone.

Along with text-overflow, you should use other properties like:

overflow: hidden; 
white-space: nowrap;

You can use .truncate class to achieve this. Here is the link from the Tailwind documentation.

Solution of the initial problem:

&__title {
    @apply truncate;
}