Tailwind: text-overflow: ellipsis?

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

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

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

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

enter image description here

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.

enter image description here

Related