[Feature Proposal] Add new "ellipsis" utility

[benface]

I know there is a truncate utility:

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

But I suggest adding an ellipsis utility that doesn't truncate unless absolutely necessary (when the text cannot wrap anymore):

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

[benface]

Alternatively, white-space: nowrap; could be removed from .truncate, as there is already a separate class for it: .whitespace-no-wrap. So to get the current behaviour you'd need class="truncate whitespace-no-wrap".

[terryupton]

I favour your second option @benface. The nature of Tailwind and css utilities ideally is that each class does its own thing. So I’d say the second option seems more suited and flexible.

[adamwathan]

Can you provide an example of where this would be useful? I can't for the life of me get text-overflow: ellipsis to do anything without white-space: nowrap.

[adamwathan]

Got an example:

https://jsfiddle.net/7qhu8hmq/3/

[caneco]

I use a lot on table cells.

Example:

[benface]

After a discussion with Adam on Slack, I think the best solution would be a new utility that sets just one property:

.ellipsis {
    text-overflow: ellipsis;
}

Because there is already a overflow-hidden utility, so you could either do:

<div class="truncate">To truncate one line of text, without wrapping</div>

or

<div class="ellipsis overflow-hidden">To truncate when the text cannot wrap anymore</div>

[benface]

@adamwathan Interested in a PR that adds this class?

.ellipsis {
    text-overflow: ellipsis;
}

[benface]

Hey @adamwathan I see you've been closing many issues today, what are your thoughts about this?

[adamwathan]

Still open to adding it just not sure where it should live. Would probably want to add an "undo" utility that sets text-overflow: clip which makes naming trickier.

[benface]

Oh yeah, @hacknug and myself have put some thought into it here: benface/tailwindcss-typography#5

[simensen]

to-ellipsis / to-clip look interesting, but it was quite hard for me to figure out what the name meant since I initially read it as toEllipsis or toClip like toString. t-overflow-[key], perhaps?

[hacknug]

Yeah, I suggested .to-[key] because I prefer weird short namespaces than longer ones like .t-overflow-[key] haha

Right now core uses two conventions for text utilities: .text-[key] and .[key]. Adopting the first one might cause unexpected collisions in some cases and I don't think the second one makes much sense in this case.

Another option I don't like a lot would be .overflow-[key]…

[simensen]

Even .t-o-[key] might be less ambiguous than .to-[key].

Would .text-overflow-ellipsis and .text-overflow-clip be too on the nose?

[benface]

@adamwathan What do you think about:

.ellipsis {
  text-overflow: ellipsis;
}
.no-ellipsis {
  text-overflow: clip;
}

[robclancy]

What's wrong with text-ellipsis and text-clip?

[benface]

@robclancy Yeah those are good options too, but I suggested the above to make it obvious that the text-overflow: clip utility is really meant to unset the ellipsis at a higher breakpoint. There's no other reason to use it at the moment, and I don't think text-clip makes that intention obvious. It's the same reasoning as Tailwind calling font-style: normal not-italic instead of style-normal, and text-decoration: none no-underline instead of decoration-none, I assume.

[rwu823]

@adamwathan May I know why you created .truncate? This goes against the original intention of atomic CSS. and it's equal to:

.truncate {
  @apply overflow-hidden text-ellipsis whitespace-nowrap
}

Honestly though the best solution is to just not do weird stuff like this at all. Use Tailwind’s utilities directly in your markup the way they are intended to be used, and don’t abuse the @apply feature to do things like this and you will have a much better experience.

However, the document's reference to @apply is discouraged. Also, what I can't figure out is that it's fairly easy to do an atomic approach just like this:

export const truncate = `overflow-hidden text-ellipsis whitespace-nowrap`;

[adamwathan]

It was introduced in v0.1.0 about 6 years ago when I hadn’t yet developed my opinions as strongly as I have now. There was no text-ellipsis class in those days either. I might not include it if I was designing Tailwind from scratch, same with the container class.