Master CSS Overflow/Text Wrapping Like A Senior Developer

[@feynthefallen]

Thanks, that was very helpful. The only issue with your videos I regularly have is that they are so packed with information that my brain goes into overflow.

[@shikhargupta4249]

😂😂

[@stephenuchenna8229]

😂😂

[@adityaprasad3122]

Use only the things you face problems with i.e add overflow to be auto

[@feynthefallen]

@@adityaprasad3122 Overflow on my brain is on auto.

[@SNAKEx197]

Well if I run into a problem, I look it up or I surf KZbin. Stuff like this sticks to me because it fixes problems that I’m facing on my projects or at work. Bookmark these videos. You’re not expected to remember everything, only stuff you apply to your work.

[@leonelcenteno3816]

I am working on a website for sports journalists and the text-overflow property just made my day. Thank you!

[@tinny77]

Also, you can set the height of the box with the CSS unit on, that's exactly one line of these height. 3lh will show three lines of texts avoiding the clipping of and the guessing with pixels

[@Turabbo]

One extra tiny thing; the "text-wrap" longhand property is now baseline. So instead of memorising "white-space:nowrap" whenever you need text truncation, you can use "text-wrap:nowrap" instead. It's super trivial, but I love how much more common-sense it feels when I'm explaining it to new developers. Just a tiny little quality of life thing.

[@kaustavroy6542]

Thanks it was much needed for me. Was struggling with word wrap in cards.

[@HeyNoah]

Really helpful walkthrough for dealing with text and overflow!

[@Philip-philippe]

Wow you are sooo informed mahn. I wanna be greater than you in future.

[@CalvinMwaipopo]

This is very useful, Thanks a lot

[@berkaybakacak]

wow. this video taught me a lot. Thanks a lot :D

[@mcbalz]

What editor are you using!? It’s awesome

[@mcbalz]

Never mind I zoomed in and saw it is vscode. Cool

[@khorium9626]

Really helpfull, thank you.

[@mina86]

Related question: How do I limit width of a PRE so that it, **together with all the inline margins and padding**, is never wider than 100svw. If I try ‘max-width: 100%’ it is sized to fit the content and causes horizontal scrolling on the page. If I try ‘max-width: 100svw’ the content of PRE is limited to width of the width of the browser window but additional margins and paddings of ancestor elements still causes horizontal scrolling on the page. Best I figured is something like ‘max-width: calc(100svw - 3rem)’ where I manually add all the margins to get ‘3em’ but that doesn’t work if margins are changed or I move PRE inside of another nested element.

[@XRAYPubgMobile]

Did you try putting box-sizing:border-box; on the pre?

[@XRAYPubgMobile]

In combination with the max-width 100svw; i think it might work.

[@1RqMi]

Thanks kyle 😎

[@Caldaron]

Kyle the ninja. avoiding invisible bullets left and right, swoosh swoosh

[@DxBang3D]

we no longer need to write overflow-x and y, we can do overflow: hidden scroll/auto. (at least in Chrome and Firefox)

[@keviincosmos]

Also try to use ­ Inside a word, and an automatic hyphen will be inserted. Ex: reallylongwordhere Do: reallylong­wordhere Will automatically do this as the block is getting smaller. reallylong-wordhere

[@JeannetteMedja]

Yo bro i just started coding and already learned tailwindcss, css, js and svelte. Now am looking to enhance my skill by learning animations ( scroll trigger etc... ) so do you think it's easier to do in js, css or even tailwind am lost a bit thank you And thank u for your work this help us a looooottt 😅

[@TarrenHassman]

I started using framer motion for animations and I’m a fan so far. Css based animations can have a lot of weird performance bugs and require using a bunch of WebKit flags, etc. to work on every browser. Framer motion is performant and more intuitive imo

[@JeannetteMedja]

@@TarrenHassman thanks bro, I'm really not a fan of the use of too much library ( maybe bcz am a new programmer) bcz i feel like it overcomplicate things in the sense that when a bug occur you will spend a lot more time to figure out and that make the code more difficult to read for someone else That's why I'm learning motions with js but i think i will go for gsap since i heard a lot of good think about it, or please can you tell me more on the issues with css animations ? ✨

[@TarrenHassman]

@@JeannetteMedja Sure. One of the ones I ran into recently was animating comic css gradients caused them to strobe on certain resolutions. Framer-motion converts your css animations to a performant implementation. It essentially replaces the key frames and animation declarations in css. You still animate using css props they just get written in the inline props on the motion.div/p/etc components of framer-motion. I’m not a big fan of a bunch of libraries either, but this is one I’d recommend

[@gokhanbahadir758]

Awesome content. I feel like an absolute geek to watch and learn continuously, while some so-called devs I encountered are still using nbsp for fixing placement 😂 and they are still hired as "senior" title...

[@NikitaDrokin]

To be fair, if someone doesn't know all these good CSS workarounds, a nbsp may be a good bandaid fix. It's not perfect, but it still works sometimes.

[@gokhanbahadir758]

@NikitaDrokin as a lazy dev, sometimes I use it too 😅 what I'm actually trying to say is I can't understand why some devs stop learning and improving themselves. Even if I don't know something, i should at least try to learn. I learned these css properties to make a 2 line ellipsis last week. I could have said I only know one line ellipsis, but I see these as a learning opportunity. I think a software developer should always be eager to learn and brave to challenge his skills. Yet I see ppl already given up learning in their late 30s, but still expecting respect from juniors who are way more knowledgeable. In short, I know someone like this who codes so bad that I and a newly graduated junior have to fix all the time 🥲

[@mohamadybr]

I am sure there is no position of "senior CSS developer" and they are probably hired for other skills they have. Senior devs are usually responsible for making higher end development decisions, so they need to focuse more on improving their decision making skills instead of learning and knowing all bleeding-edge hacks and updates. Additionally, majority of senior devs are older people, so they didn't have access to such knowledge when their job was making sure their code is up to date when standards

[@trappedcat3615]

I need the video on how to center a div like a Senior Dev.

[@mahidmunna01]

Thanks 💥❤️

[@arunbm123]

brilliant !

[@shaikshavalisyed2012]

Excellent.

[@n1_ozzy]

just in time

[@prajapati_dp]

great !

[@hieunguyenhoang1948]

Try this and comeback here, give me one like if this resolve your solution. I always do it in my project

[@ezwtwrziehag1736]

prop tip: The overflow-wrap property should be applied to the element that directly contains the text.

[@alvaroprietovideos]

Nice video 👍

[@cipherxen2]

I have new idea of a project: head wobble stabilizer. It's very hard to watch you without feeling dizzy.

[@tylertamplin4365]

Good videos. I just wish he’d hold his head still 😊

[@surajitdas6555]

Brother how to implement ellipsis in the middle dynamically with windows resize event

[@squeally]

No middle ellipses with pure CSS, Aug 2024.

[@SamuelKarani]

Masterfully done. However you did not fully cover all the whitespace properties

[@sergeisurin2963]

👍

[@0theslayer644]

First to be here! No idea why I commented this.

[@culan_SCP]

5th

[@xilliman]

You will laugh, but we actually habe sich long words in our German language 😂 7:09

[@bapydev]

woooowwwww

[@MohammedHusainmobikira]

One suggestion plz use in your video Anything you showcase or teach try to teach in a way of animation which show red cross that this is wrong first than after changing it show green tick that this is right I think this way your video get full attractive as i think over youtube now days Although your content is very special and helpfull for me, THANK YOU.

[@ezwtwrziehag1736]

10:25, if overflow-wrap is set to break-word, why does the width: min-content property of the div not consider asdf as its min content anymore? this doesnt make any sense

[@Siderite]

Too bad they didn't add a CSS property that allows you to have an automatic title on the elements with clipped text. it always annoyed me that I could do all of this through CSS, then I had to write complicated code to: 1) detect there has been some clipping 2) manually add/remove the title attribute.

[@rock4459]

10th comment ,no Idea why i comment this

[@okkaraung9512]

First comment

[@SperkSan]

Why do you always shake your head so much, Kyle? 😂😂

[@Michael_moa]

It's the way he talks 😂

[@bogdanc77]

Please not pin 😅

[@borstenpinsel]

Css4 shouldn't add anything but remove a bunch of stuff. 😮😅

[@romainbacque9408]

Do you think ai will replace coders ?

[@loganhall1529]

No

[@ChadFrontend]

Chad Frontend approved. ✅

[@yairvsync]

`overflow-wrap` is years-old. Best combined with `hyphens: auto` both years old... most of the content in the video is years old and very much not new

[@levsonc]

Unfortunately, hyphens: auto is not supported for many non-english languages in Chrome.

[@prajwaljoshi8983]

pin please❤

[@_brahim_]

[@TheCârtiță]

Every month something new❤️‍🩹i wish i cold do websites🥺nice tough to at least be up to date with the novel things