Taming Long Text: The Art of Truncation with CSS

56kode - Oct 17 -

Hey fellow devs! 👋 Ever struggled with long text overflowing your carefully crafted UI? Let's talk about a nifty CSS trick: text truncation with ellipsis.

The Classic Single-line Truncation

You've probably seen this one before:

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

It's great for titles or short descriptions, but what if you need more than one line?

Multi-line Truncation: The Plot Thickens

Here's where it gets interesting. Check out this CSS:

.multi-line-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

This little gem allows you to truncate text after a specific number of lines. Pretty cool, right?

But wait, there's more! 🎉

What about browser compatibility?
How do you handle fallbacks for older browsers?
Are there any gotchas you should know about?

I've written a comprehensive guide that dives deep into these questions and more. If you're interested in mastering text truncation and elevating your CSS game, check out the full article here: https://www.56kode.com/posts/text-truncation-with-ellipsis-on-multiple-lines/

Don't let long text ruin your designs. Learn how to tame it with style! 💪🚀