Lately, my colleague (Scooter) and I (Boots) ran into a puzzling UI problem.
Scooter and I work on the frontend of an application that displays lots of file paths.
Our app also does other things, but for now, let's say we work on a world-renowned file-path-displaying application. Our work is riveting.
Because file paths can end up growing quite long, Scooter and I regularly have to trim them. Like beautiful, delicate hedges. Or toenails.
For this, we've been using
text-overflow: ellipsis (mdn docs here).
It works alright, but one drawback to this approach is that it trims the end of the text. See below:
It baffled ol' Scoots and me that there wasn't a native way to detect when text was trimmed in the browser. And that there wasn't a way to trim it from the left side instead of the right!
Gah! CSS! So useless, am I right?!
Well, here's where it's worth noting: Like bad, bad devs, we did not read the MDN page on
text-overflow in its entirety.
I'll spare you the overcomplicated (but functional!!!) React Hook we wrote to solve our text-truncation issues. Instead, let's just bask in the simplicity of the CSS-only solution together:
One extra line of css. That's it.
When combined with
text-overflow: ellipsis, setting the text direction to be right-to-left gives you text truncation from the left. Shout-out to Arabic and Hebrew!
I have no idea if there are downsides to this. Like does it mess with screen-readers? No idea. I literally just thought about that while writing the last sentence... 🤔
Okay I should probably go check on that.
Thanks for reading! ❤️