Say Goodbye to Pesky Overflowing Text With the text-overflow CSS Property

This article was originally published in the DEV Community.


Here's a neat little trick:

You can use the text-overflow + overflow CSS properties to deal with long strings that break your UI.

Check it out:

example of text-overflow in action

This is better than truncating the string with JavaScript because you can still copy and paste it fully.

And it is way more flexible because it adapts to the container's width.

another example of text-overflow in action, this time with changing width

And that's it! There ain't much more to it, really. This is a neat little trick in its purest form, a small piece of webdev wisdom fit to a small specific problem.

Oh, and text-overflow has been around for a while so I'd say that even the Nintendo DS Browser supports this property. 😄


Does anybody know who's the creator of that classic CSS IS AWESOME logo? I've seen it in mugs and stickers everywhere but couldn't track the creator to give them credit.


Hey, let's connect 👋 #

Follow me on Twitter and let me know you liked this article!

And if you really liked it, make sure to share it with your friends, that'll help me a lot 😄