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

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:

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.

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 😄

Comments

[ZuoZuomu]

How can I do if we have multi line text ? :)

[Louis Low]

The sorcery method is

p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden
}

[jan paul]

i do lots of web, but i still hate css. because it often feels like

this

this it magic? webkit crossbrowser? i learned smthng here. -webkit-line-clamp: 3;

[Vitor Paladini]

The -webkit part is a prefix that states that this property probably only works with WebKit based browsers.

Some properties are unique to Chrome/Safari so you may need to write browser-specific CSS from time to time.

🚨🚨🚨

But those in the example above are deprecated/non-standard properties and should not be used.

🚨🚨🚨

[Louis Low]

Yea, very crossing browser. If you hate CSS that much, I still can recommend you another way by using the Yogurt CSS framework.

<!-- Example -->
<y class="clamp-3">
  ...
</y>

Still hate it, try making your own styling dev tool.

[Vitor Paladini]

Great question!

The example implementation works like this for multi-line:

Is that what you had in mind?

[gotheer]

overflow: hidden;
white-space: nowrap;