Tailwind: text-overflow: ellipsis?

Question

Is there a way to use

text-overflow: ellipsis

Thought the Tailwind CSS Framework

I would like to use the tailwind convention like :

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

Instead of

&__title {
    text-overflow: ellipsis;
}

Solution 1

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

Solution 2

Use class truncate

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

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

overflow-hidden will hide overlaps, truncate adds ellipsis and optional w-2 set width

Comments

[AKNair]

text-overflow: ellipsis; cannot be used alone, Along with text-overflow, you should other properties like overflow: hidden; white-space: nowrap; also. You can use .truncate class to achieve this. Here is the link from the documentation: tailwindcss.com/docs/whitespace-and-wrapping