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 😄
Top comments (7)
How can I do if we have multi line text ? :)
The sorcery method is
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
-webkitpart 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.
Still hate it, try making your own styling dev tool.
Great question!
The example implementation works like this for multi-line:
Is that what you had in mind?
overflow: hidden;
white-space: nowrap;