Use this instead of white-space: nowrap

white-space: nowrap can come in handy at times, but it introduces the possibility of overflows, but using min-width: fit-content solves the same problem, but will allow text to wrap if there is no more space available.

[astrahcat]

Every time you make a video, I'm like 'alright I've GOTTA REMEMBER THIS DONT FORGET THIS!!!'

[fredhair]

Showed this to a guy at work 3 or 4 years ago as he was using white-space: no-wrap, I've used this technique for a couple different things - most commonly the button situation in the video but also table cells.

[hakeryk]

Finally a solution for messy tag buttons.

[jenstornell]

Brilliant! It's so easy to fall back to old destructive habits. Also this design challenge is really common on the web.

[MuhammadAli-vemt]

Definitely have had this problem before, will pull up this video next time I run into it. Thanks!

[loudboomboom]

Ugggg, I’ve been at it over a decade. Where have you been my whole life, fit-content!

[KaizenCodes]

That’s a great looking product card. Something about the fonts and the lil effect on the button

[Dipenparmar]

Real world css problem 😊😊. Solved. Thanks

[blizzy]

straight to the point, excellent advice as usual 👍

[webdevluc]

Great CSS tip, thanks for sharing it Kevin

[raymondmichael]

hungry for a full tutorial on this card layout 😊

[jonathanjohnson]

Css is notoriously annoying in cases like these. Thanks Kevin

[xvoo]

little things like that force you to upgrade pc over time, calculations in the backend must be crazy for that

[amirarashi]

thanks for this great tips kevin. one question : if parent of icon and text have flex-group class why flex-wrap does not working I mean why text is not on new line ?

[GRITFUEL-yt]

thanks for the info, but how do you quickly comment it out or remove the comment like you did?

[keifer]

Oh what the heck, I'm not gonna get a job anyway

[FurkanKARADENIZ-ttzf]

I tried it on an absolute pseduo element ::before but, it doesn't work. May I ask why this happens?

[givowo]

You deleted a space from the tab so the line was offset after you highlighted and replaced the text XDD

[krzysztofprzybylski]

What's the difference between this and max-content?

[ashokreddy]

Finally one solution 🥲 This irritates me a lot 😂