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

truncate with width eg: <div className="truncate w-32 text-left text-lightBlack capitalize">display name</div>