loading...
Cover image for Say Goodbye to Pesky Overflowing Text With the text-overflow CSS Property

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

vtrpldn profile image Vitor Paladini ・1 min read

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.

Posted on by:

vtrpldn profile

Vitor Paladini

@vtrpldn

A software engineer that really likes working with user interfaces. Writes mostly JS at a small (but mighty!) Danish startup. Loves cooking.

Discussion

pic
Editor guide
 

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

 

The sorcery method is

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

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;

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.

🚨🚨🚨

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>
Enter fullscreen mode Exit fullscreen mode

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

 

Great question!

The example implementation works like this for multi-line:

multi line example

Is that what you had in mind?

 

overflow: hidden;
white-space: nowrap;