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

⌚ 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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[felixcornelissen]

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

[aviralvikram]

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.

[rproctor]

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

[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 YouTube.

[degenyakuza]

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

[venomus]

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

[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 😊😊

[bobross]

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

[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

[brainheap]

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

[ronak]

❤man it helped me a lot thank you God bless

[StephanBerrill]

i like this .title {
overflow: hidden;
text-overflow: ellipsis;
}

[rbbvhwg]

I really Helpfull for your video, Thank you soo Much

[penguinxed]

another very useful content sir, thanks!

[DaBigin]

Hey Kevin, I couldn't get this to post in your YouTube 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.

[makingtheweb]

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.

[rkrupon]

you this video is very effective for beginner.
I am speaking from Bangladesh.❤

[vi_shw]

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