4 ways to deal with overflowing text

Overflowing text is actually a feature of CSS, but it can feel like a pretty annoying one 😂. Depending on the situation, there are different ways we can deal with it though, so in this video I look at 4 different ways that could come in handy in different situations.
🔗 Links
✅ Custom scrollbars: • Create custom scrollba...
✅ Container Query Unit support: caniuse.com/?search=container...
✅ More on container queries: • Container Queries are ...
✅ More on container query units: • New CSS Units! Contain...
⌚ Timestamps
00:00 - Introduction
00:50 - Why is this even happening
01:20 - overflow-x
01:40 - break-word
02:21 - min-content and fit-content
03:07 - container queries
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@felixcornelissen89]

Another good option is to add the ­ character where you would like the word to break. In this case you could have awe­some. It adds a hyphen if the word doesn't fit, but otherwise it's invisible

woow!

[@aram5642]

Equiv of (word break opportunity).

[@itspawanpoudel]

Yes Kyle has made on it in WDS

[@jshstuff]

That’s so cool

[@dripcaraybbx]

But then you're coupling markup with presentation. We shouldn't have to pollute the content like this to account for or workaround limitations in the UI.

[@aviralvikram9431]

This problem occurs many times in my projects and i don't how, but somehow Kevin always manage to predict what we need and what's most useful for us one by one.I really appreciate these super juicy knowledge you are sharing with us Kevin. You are filling that 20% knowledge gap which makes the difference between an intermediate, advance and Professional developers.

[@TheElkster]

Really great to see 'all' the options available! Thanks, Kevin!

[@gwemula]

That last bit about @container explains what container queries is better than some other videos I’ve seen on KZbin.

[@rproctor83]

Can't wait for container stuff to be more supported, it is like a dream come true.

[@degenyakuza]

Thank you so much Kevin for making css easier for us to understand

[@venomus9286]

This channel has so many tips and tricks, it is insane. KP, lord of html and css.

[@bobross2404]

Hope you're having a great day! thank you for all the awesome videos

[@DucklengUgly]

I love your channel your energy makes the videos enjoyable regardless if I need the information right away ill watch it anyway for fun 😊😊

[@alcardm]

This is a sort of "Memebuster: css edition". As you seen on TV.... love it!

[@suhaybjirde]

i feel excited while watching your videos and get some thing i didn't know

[@rilan07]

This is awesome, Thank you Kevin

[@vi_shw]

your video pop-up when I want solution for my project .

[@PhilLesh69]

I know this is a JavaScript solution, but I had one project where I finally gave up trying to deal with word wrapping on wildly varying length of text in some headings that I wrote a javascript function and attached a listener to page load that calculated the height of the element and if it was 2 times the line height it would reduce the font size by a percentage and recalculate until the element height was equal to or less than the line height. It was a little clumsy since a page would load with a heading that occupied more than one line and then users could see the heading change sizes really quickly and realign the element flow accordingly. So it was probably bad for page speed and other seo metrics. But it fixed that immediate problem at least.

[@brainheap]

i just know CSS is awesome cause you are awesome without your valuable videos, i can't find out the beauty of CSS

[@MrOliver1444]

I love CSS thanks Kevin!

[@Zakaros1000]

wow, that container thing is awesome

[@ShahnewazTameem]

Great and informative

[@DaBigin]

Hey Kevin, I couldn't get this to post in your KZbin ideas section. Here recently I was trying to answer a question on how to set a margin on a item in a navbar that uses bootstrap classes, but when I got to looking at the documentation I got confused. I was wondering if you could make a video on the topic. I'm sure people n would want to watch it. Thanks again for the b work you do. It's appreciated.

[@user-rb8bv8hw3g]

I really Helpfull for your video,Thank you soo Much

[@kevinwaag9976]

beautiful, simple! keep it up ;)

[@penguinxed]

another very useful content sir, thanks!

[@ronak1520]

❤man it helped me a lot thank you God bless

[@riadbenosmane8561]

you saved me thank you soooo much man

[@labialkosta261]

Thanks for sharing

[@alexdubkov6998]

Super content!

[@makingtheweb6620]

Another good video. Would shrinking font size be ok on mobile? Can you do more with container queries? Can It be used as an Articles container.

[@mohd-obid]

Thank you ❤️

[@makingtheweb6620]

Perhaps you should make an algorithm of your choice or so a poll on what improvements would be the easy way for ways to make it much easier to make a website/s. The whole CSS eco system seems very un-human-friendly and overly complicated. I'm sure you have some great ideas on ways to make the job much straight down.

[@Coachnereus]

i currently have this problem in a project, Thanks

[@johanstam3602]

Hi Kevin! Can you do a short/video on how to create a flexbox container (with a max width and content centered) where a flex item (image) bleeds to the right of the viewport?

[@reachin4thetop709]

your awesome bro. U r very cool ma man. Keep it up

[@Jack-ss4re]

3:40 that some god level shit

[@illiayehorov5008]

very cool techniques. i watch your videos all the time and admire the solution. Unfortunately, just that I don't understand English very well ))) Because I am from Ukraine. But I try to learn English !) Thanks for the video!

[@aram5642]

White spacing , word break... this is one of the things I always have to look up. And Chrome, please we are waiting for cq!

[@KevinPowell]

They are in Chrome :D We're just waiting for Firefox now, and it's about to go into Nightly from what I understand!

[@benfrese3573]

really nice thumbnail btw!!

[@AlexFetfa]

Yo Kevin you just hit 666k subs, congrats

[@DaviAreias]

That cqi is a game changer

[@mmuralikrishna2881]

HeyKevin.. Waiting for Css Rocks

[@n_mckean]

Careful with some of those. For WCAG 2,1 the user must be able to achieve 200% bigger font sizes without loss. Clamp can torpedo that as just one example.

[@KevinPowell]

If font-sizes are set in rem (and the middle value in the clamp() includes a + rem value), it shouldn't cause any issues... I think 🤔

[@n_mckean]

@@KevinPowell there's some lovely work by Adrian Roselli on this is you care to deep-dive. Just thought I'd add the note for others because there are definite cases where issues exist.

[@KevinPowell]

@@n_mckean I'll definitely look into it 👍

[@adityapnair5515]

Is it possible to add flexbox into an already existing code and modify the code accordingly?

[@chennasreenu4723]

Overflow: ellipsis, Am I a joke to you?

[@franktielemans6624]

I use ­ Soft hyphen in HTML

[@hallucinations5456]

I forgot your name and searched for css king

[@VishnuandAvyukt1918]

Hey Kevin, Can we know the SCSS course launch date please 🙏

[@JB-fh1bb]

@1:41 Ciao!

[@darshansr9025]

how can i keep track of your content. Is there a code pen available for this?

[@ravitejadarla3882]

Please make a video how to make our page smooth scroll after adding heavy animations

[@amircahyadi9219]

❤️❤️👍

[@zakidzz]

hi can you please make a design system with scss and make a website using that design system also use react

[@harmez7]

i always use Tailwand for my css am i noob ?

[@frontendinsimplewords]

Congratulations with 666k subs)))

[@sinanisler1]

i would just give span to that word and I am good to go. :)

[@user-xv9bn2fe5c]

0:51 problem right here, but the problem is in the left. oh you are talking about yourself. "kidding😂😂😂😂"

[@musteemustang3439]

Please who can help me out with how to deal with overflow in carousel or slide images.

[@MyDpop]

there is a fifth approach to solve this problem: use a *shorter word!* Also not perfect But hey it's a solution! happy thanksgiving 🎃🎃

[@KevinPowell]

I've definitely done that before, lol

[@KosmokratorVideo]

I will never understand why the SHY tag didn't get any real support in html.

[@anugyasharma1649]

am i dumb or what nothing works on me :(

[@user-gf9ri4wj5h]

p {display: “none”}

[@Samahady5159]

First! Hi Kevin

[@devilreaper8543]

css: container-type is yet not supported by Firefox........

[@KevinPowell]

I know, I mentioned that browser support isn't great before going into how it works, and they're about to put it into Firefox Nightly, so it shouldn't be *too* much longer

[@mistervallus185]

wouldve been if you showed how to make the word cut of with a ... eg: This is too lo...

[@foxxo-dev]

22nd commenter ^^

[@XMattingly]

.kevin-powell { overflow: awesome; } 👈🤓