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:

We didn't like this, since Scootsy and I wanted our users to be able to see the filename. And, as we've learned from our dedicated work on this app, the filename comes at the end of a path.
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.
We just kinda skimmed that page. Then we proceeded to waste a silly amount of time on unnecessary javascripty solutions to our issues. Which, I guess, is the overarching theme of the last decade of web development sooooo, who's to blame us really?
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:

direction: rtl;
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! ❤️
Top comments (0)