DEV Community

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

Posted on • Updated on • Originally published at paladini.dev

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

#html #css #webdev #beginners

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 😄

Top comments (7)

Collapse
 
bjw1234 profile image
ZuoZuomu •

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

Collapse
 
louislow profile image
Louis Low • • Edited

The sorcery method is

p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
janpauldahlke profile image
jan paul • • Edited

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;

Thread Thread
 
vtrpldn profile image
Vitor Paladini • • Edited

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.

🚨🚨🚨

Thread Thread
 
louislow profile image
Louis Low • • Edited

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.

Collapse
 
vtrpldn profile image
Vitor Paladini •

Great question!

The example implementation works like this for multi-line:

multi line example

Is that what you had in mind?

Collapse
 
gotheer profile image
gotheer •

overflow: hidden;
white-space: nowrap;

Read next

sanskritiharmukh profile image

Bypass CORS errors while testing your APIs using Hoppscotch 🔧

Sanskriti Harmukh -

ashsajal profile image

React.memo - Optimize React Functional Components

Ashfiquzzaman Sajal -

vishnusatheesh profile image

React JS Fragments

Vishnu Satheesh -

thejoernal profile image

Add basic animations to your site using Animate.css and wow.js

Joseph Ochego -