Chrome 157 went stable on November 3, and one small CSS change in it is surprisingly handy: text-overflow now accepts a custom string, not just ellipsis or clip .

That means the "…" at the end of truncated text can be anything you want: " (more)" , " →" , " [...]" .

It's listed in the Chrome 157 release notes . Firefox has supported it for years, since Firefox 9. Safari doesn't support it yet, according to MDN's compatibility data .

I tried it out before writing this. Here's the recipe, plus two things that caught me out.

The basic recipe

text-overflow only works on text that's already overflowing on a single line. So you still need the usual two properties alongside it:

.truncate { white-space : nowrap ; /* keep it on one line */ overflow : hidden ; /* hide what doesn't fit */ text-overflow : " (more)" ; /* the new part */ }

Enter fullscreen mode

Exit fullscreen mode

That's it.…