I know, ellipsify is not a word… but it’s a neologism because the internet, so it’s okay. And I just learned a new word!
Just this morning in the thirty minutes of spinning up and reading the news, I’ve seen the phrase “Life’s too short” at least thre… nope, four times.
I’m not a big believer in coincidence. Everything has a purpose. Although, sometimes that purpose is encrypted and locked behind intricately connected yet discordant things and it may not be obvious.
This morning, that phrase made me want to shut down my computer, get out of my cubicle, and live like today was my last day alive! Except… what would I do? What do I want to do?
In lieu of knowing the answers to those questions, here’s a bit about how to use CSS to truncate text that’s too long for its container:
But! It’s not that simple. That won’t work by itself. Sometimes a CSS property is more like the drummer in rock band than a solo hipster doing that coffee shop guitar thing while everyone just wants to be able to hear each other and not have to put up with some whatever songs about his narcissistic metamorphosis of the heart, or how work is just a peanut butter sandwich with no jelly, or whatever.
Anyway, Here’s How to Make It Work
The magic happens when the three properties of my
.ellipsis class work together in a container that either has a set width, say, by your mom, or by an outside force that renders it too small for its content, like some responsive layout mechanics.
The Break Down
overflow: hiddenhides the inner stuff that doesn’t (or won’t) fit.
white-space: nowrapprevents the content from wrapping at natural breakpoints.
text-overflow: ellipsistells the content how to be decorated when the non-wrapping text gets clipped by the overflow: hidden directive.
But What About…
This method of truncating text purely with CSS works for lots of cases. However, it does not work when you want multiple text lines (