How to Handle Text Overflow (With a CSS Ellipsis)

When a string of text overflows the boundaries of a container, it can make a mess of your whole layout. Here’s a cool trick to handle text overflow by truncating long strings with a CSS ellipsis. ► Download Unlimited Stock Photos, Fonts & Templates: elements.envat...
Read more on How to Handle Text Overflow (With a CSS Ellipsis) on Envato Tuts+: webdesign.tuts...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: tutsplus.com/?...
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: elements.envat...
► Subscribe to Envato Tuts+ on UA-cam: / tutsplus
► Follow Envato Tuts+ on Twitter: / tutsplus
► Follow Envato Tuts+ on Facebook: / tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - overflow css

[@soulslord1733]

just one more recommendation, because I'm a begineer and I took a lot of time to find the solution before, if you have a text with space, you have to add " white-space: no-wrap", otherwise this will act like a paragraph

[@ancilhameed1234]

Wow, this was so simple! You saved my time buddy .. thanks keep sharing good stuff ! :-)

[@envatotuts]

You're welcome!

[@keifer7813]

Thank you my brother. I love you

[@marielsofiagutierrezzapien7929]

But this is still showing the tooltip even when the text isn't truncated, which isn't necessary and kind of weird. How can we show the tooltip only when the text is truncated?

[@YourMasta]

Didn't work for me
Edit: It always blows my mind how these things never work.

[@jellyfish1772]

thank you so much

[@filipevieirawho]

Thank you big time! It is possible to set a limit for like 2 lines of text?

[@setomas_]

THANK YOU. You are amazing bro

[@goldenprogrammersandgamers2377]

Thank you

[@tonyo.2732]

Thanks it was very helpful hint.

[@envatotuts]

Glad it was helpful!

[@Room3102]

Wow, thanks for this.

[@johnmhalicpagaduan5736]

super THANK YOU SO MUCH!!!

[@sadraseyfi3734]

Thanks but what if we want the user to see it all. Is there a way to decrease the font so user can see it all?

[@p_fu]

Yes use font-size

[@reviewer8354]

What if that text i want to break down

[@eresy.5968]

add " white-space: no-wrap"

[@codewithsehran]

the things removed my depression

[@rezarahman1782]

Thumbs up.

[@untiground]

nice

[@envatotuts]

Thanks

[@HighestSubs-with-no-videos]

But, how to do with 2lines

[@fragrantbloom]

thank you

[@phsal5182]

thank you