Tag: white-space

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!

---

The News

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?

Ugh…

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: text-overflow: ellipsis

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.

CSS Bite

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

The Break Down

• The overflow: hidden hides the inner stuff that doesn’t (or won’t) fit.
• The white-space: nowrap prevents the content from wrapping at natural breakpoints.
• The text-overflow: ellipsis tells the content how to be decorated when the non-wrapping text gets clipped by the overflow: hidden directive.

Playground

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 (white-space: normal) and want an ellipsis at the end of a certain number of words or characters. To do that, javascript (jQuery, Angular, etc…) would need to hijack the text and fiddle with it, or something on the server-side of things would have to deliver that from the get-go.

For more complicated and probably more robust JavaScript solutions, and other things about ellipses, check The Goog.

Yay! Dots!