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

Answer 1

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

Answer 2

Tailwind truncate will only truncate one line, and includes the following out of the box:

If you need flexibility in # of lines, I suggest installing tailwindcss-line-clamp and using line-clamp-X, which also has everything you need within.

Answer 3

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