I sometimes think that KZread and Kevin have some sort of a conspiracy in which they hear my problems and a day after that Kevin comes out with a video solving that same problem with CSS. Literally happened in the last two videos, in which i took the JS approach to solve them. If I only knew... (researched more...)

@sylviaeguzoro7978

Жыл бұрын

You know this! 😂

@joseph_connelly

Жыл бұрын

lol or he's good at addressing common problems :D not to intentionally add to your conspiracy, but this was my problem yesterday as well, I solved using JS too, then morning comes and there's this clean solution :D I assume it's KZread and Google whom are getting better at sharing our web history and providing like-content in across platforms. I personally like it - I think it's counterintuitive to think the process is "creepy" or "invasive" when more often than not it's helpful like in this situation :)

@salimal-tarsha5564

Жыл бұрын

That did happend to me two !!

@nataliesmyth9013

Жыл бұрын

Seriously same.

@wchorski

11 ай бұрын

You could use Google Trends to track what people are searching for

I've learned more from you in the last two weeks of viewing than the last 2 years of tinkering with existing CSS , thank you

This is legit what I was wanting on a community post forum design I'm working on for our Blazor redesign! Thanks a ton!

This is powerful, you've not only made me love CSS, but I've gotten better watching your videos

Damn this is sooo useful! Loving these shorter, one quick topic videos, keep em coming!

I wanted this! Thanks Kevin!

Amazing! I was looking for the solution to this problem from last year, but found it now. Thank You!

Thank you, my dear friend! Your help is always appreciated. Wishing you all the best!

I just needed this TODAY !

excellent work as always kevin

Really really really and extremely useful video. Few days ago faced that problem at work and investigation took around 1 hour. Thx for video. In favorites to not lose it.

Love it men!!! Thank you!!!

This is great, hopefully we get full support for this soon!

That's amazing and helpful. Thanks @Kevin

Awesome feature! Thanks a lot!

Thanks Kevin I've often wondered how to do this.

you're amazing Mr. Kevin Powell. Love your work. Thank you🙃

Works here. Thank you!

I love you. I stopped using Bootstrap etc since 2021 thanks to your videos, now everything I do is with pure CSS

Amazing stuff! Was really wondering if you could create a multi-line ellipsis and your video came out in the right moment!

@ornous

Жыл бұрын

This! It's like he knows what we're up to ^_^

Amazing content. For the record, display: -webkit-box; is actually display: flex; as well as -webkit-box-orient: vertical: is flex-direction: column;

@vacitabdulrazak5968

Жыл бұрын

I think it's not really the same, tried it but nothing changed..

@MentorMode

Жыл бұрын

@@vacitabdulrazak5968 actually it's better to use display flex always, however some browsers doesn't know how to handle flex, so that -webkit-box comes to help (in some cases). So, it is recommended to add display: -webkit-box; after display: flex;

I have used this in the past, copied from stack overflow, but had no clue how it worked 😅.thanks for explaining.👏

Can't wait to get the standardized version of this! The prefixed solution is pretty hacky and has several issues besides clamping everywhere. At least all browsers already support the prefixed solution for quite some time, so browser support for that is really good.

thanks for knowledge, always inspiring

Realy i am deeply in love with css and mostly with the way you teach us😍

Thank you for this video !!!

Great! Thank you always💯.

I use this a lot. To get around the height thing at the end, I often just give that element a fixed height since I'm already clamping it to 3 lines (meaning I know the height)

@theberengersniper

Жыл бұрын

Do your sites prevent users from increasing browser font size? If someone increases the font size for accessibility, you can't know the height.

@zackpyle496

Жыл бұрын

@@theberengersniper Of course. It's easy! Set the height in em

Just used this earlier this week! 🙌

You can wrap the clamped content with a div has a "flex-grow:1;" property for shorter content. The div grows and pushes the button to bottom, so the buttons will be aligned. (For line-clamp: 5 situation.)

@snapstromegon

Жыл бұрын

I was about to comment the same just using grid instead of flex, but both work here.

@The-Torbey

Жыл бұрын

@@snapstromegon I know the flexbox approach but how would you do it with grid?

@BauldyBoys

Жыл бұрын

@@The-Torbey I don't think you would want to use a grid for the card content. But something to the affect of grid-template-row: max-content 1fr max-content; Note: you must wrap your content container in an additional element or the sizing will override the line-clamp.

Usefull thank you so much making this video

Very useful, thanks 😎

it's works, thank you very much bro

Wow, it's really usefull, thanks my friend

Hey Kevin, can you use css to make a shimmer effect for resizable placeholder skeletons for any width? Would be much appreciated

Una solución super simple, muchas gracias!

Oh you beauty! I had been using another method but it suddenly failed so I was doing some practice with your 4 card tutorial yesterday (The hour 11 mins one) and thought I'd try again ...... Thank you!

Well thats interesting aprouch to do. I usually do this as you said at the begining. Cut the string and some length and concat "..." :D I love your videos, you are always ahead of time if I can say :D

0:3:18 I think an additional min-height: 5lh; could solve the problem an make each the same height.

Thank you....your videos are very helpful to me.... a lot to learn about css....love from India❤️🇮🇳

Thank you very much :)

another useful trick from u thnx

Thank you

Thank You

thaks for this video .. nice video sir

This was awesome I think. Yeah it's a line clamp instead of letter-clamp so you could specify when it cuts off.

I was doing this with JS but CSS is much cleaner, cheers!

thx a lot for the video

good simple tip 👍

thank's alot dude.

Edit: Just did a bit of digging and it sounds like the news on an official line-clamp is pretty bad? A proposed addition way back in 2018, and no signal from any browsers for future support... ☹️ --- Honestly this is probably my biggest personal niggle with the current state of CSS haha. I use line clamping all the time in my designs, and I clicked your video to see whether there was any good news. Over the moon to hear a single property is in the spec!! I can't wait! I have a sass mixin to handle this for other devs in my framework, but there's still so much jank with it. Like the block padding overflow issue, and the fact that -webkit-box behaves almost-but-not-quite like flex. Can't wait for a proper implementation!!

@KevinPowell

Жыл бұрын

There's some movement on some parts that have been quiet for awhile now, so it might happen. One issue is, even though Chromium and Safari are run by massive companies, they have relatively small teams (and FF has an even smaller team), and they have to prioritize some features over others. This type of thing tends to get a lower priority, specially with an implementation, even if it's a bit buggy

@Turabbo

Жыл бұрын

@@KevinPowell Yeah makes sense. Very hard to justify something that "works" already.

The typo was nice. Whackbit - sounds great.

@kevin powell is there a way to use clamp function to evenly wrap a paragraph - think of a paragraph floating in a container, where the first line is the full width of the container and the second line is super short. I tried playing with the clamp function but I can't figure it out or perhaps it doesn't exist? What I would like to happen is for the each line would be the same width. Maybe this is only possible with JS?

Awesome 👌

Great video. Found a situation though where in chrome I do exactly what you do but want only 2 lines to show. As soon as I set overflow: hidden all but the first line displays and the ellipse goes away like the word wrap was turned off. What is breaking the line clamp is the parent container is a display:flex; flex-direction: row;

my god this is a life-changer... in ONE LINE

Super cool 😃

i love it

Thanks for this css trick. I needed something like this, but came across a problem while using it. For some reason the -webkit-box-orient styling element gets removed from the transpiled code when I compile it in angular. Some posts suggested wrapping it in autoprefixer code will do the trick, but I was not able to make it work. Do you know why that happens? Any work around?

So powerfull effect

Thanks Kevin for such a usefull feature. Just in case, the line-clamp acts weird when it comes to languages with longer words like German. It tries to truncate too early rather than just truncate some characters of the last lines word. the easy and dirty solution would be a combination of line-clamp and break-word: break-all

Much love for css.

Is there a way to get the ... to show based on container height? for example if the container's height can only accommodate one line it will make the ... on the end of the first line, if it can take two the ... will show on the second line

Kevin! What css course I should take from you? I gotta start nesting and creating variables for my css in order to switch state in React fast. Recommend me something please! Till now my css structure looks really bad! I know grid flexbox, box model etc but my css structure is just BAD!

Hi kevin! thank for the video! any idea why this webkit css doesn't work on mobile?

I have used this a lot of times 🙂

Thanks a billion...💖💖💖💖

display: -webkit-box is the og flexbox (is the first iteration of it)

Extremely useful, currently working on an e-commerce website clone with product card with description and this will help a lot there. Btw where do you learn about these upcoming and experimental CSS things from?

@KevinPowell

Жыл бұрын

In this case, when I looked into it, I found the actual spec and wondered what was up with the prefixes, so just kept reading. I also spend way too much time reading the spec and keeping up when changes happen :P

@blackpurple9163

Жыл бұрын

@@KevinPowell yes but read where? Is there an official website or some place which I'm not aware of? I'm just a student but I love how much power CSS has to alter basic HTML and turn it into beautiful art pieces

Thanks.

Drat, I had to implement this a couple of months ago and I pulled out my trusty old JavaScript code. Frick it, I'm not going back.

Trying this today... if I find time, that is

Hey! I've just used this few days ago 😉

What we have to do for that less line content card?

Yet another reason to use tailwind: with a simple line like line-clamp-3 tailwind does all the set up for you!

Nice 🙂

I wonder if there is a way to use shadow, or gradient or opacity and overlay to create a tiny blurring or greying out of the text to the left of the ellipsis to make any cut-off words less visible to make that cutoff look less clumsy or unintended. Sort of like the way "read more" is handled on some sites where it covers a paragraph and fades out that paragraph, and when you click read more it removes that overlay and displays the rest of the page text, or whatever.

@PhilLesh69

Ай бұрын

Like a :before on an ellipsis pseudo element the way you can style a scrollbar or whatever.

Great

How i can stretch cards to be in same height and show all content in it (not hide the content and show just three or four lines)?

@KevinPowell

Жыл бұрын

If they're flex items, the default is to stretch to match height

Is there any way to control it by number of characters?

According to caniuse, at this point every browser supports line-clamp :)

It’s interesting that this was implemented in all browsers (including Firefox) with the “-webkit-“ prefix. 🧐

@KevinPowell

Жыл бұрын

Most of the non-standard properties have gone in that direction, not that there are many of them left.

Thank you..

Wekbit is the name of my next band.

Hi Will WebKit work for subgrid? It’s been so long since subgrid is supported by browsers I’m losing my mind.

@KevinPowell

Жыл бұрын

No, but Chrome is working on it, and it's supported by Safari and Firefox now, so it shouldn't be too much longer :)

Mmm wonder 🤔 why it cuts off in a word looks like that specific word would wrap to the next line....but yet it's in the same line

@KevinPowell

Жыл бұрын

It's hard to predict how it ends up cutting stuff

What is the difference between flex vs grid

@KevinPowell

Жыл бұрын

That's a big question 😅 - I do have a lot of content that looks at both, if you search on my channel for flex vs. grid you should find a few videos

Needs to be standardised. Submit a proposal to the working group!

@KevinPowell

9 ай бұрын

There is a standardized line-clamp in the spec, but no browsers support it yet

👍

Please do one on env(safe-area-inset-*)

@KevinPowell

Жыл бұрын

Oh yeah, that's a good one!

@ArielZab

Жыл бұрын

@@KevinPowell i cant figure it out for the life of me!

@KevinPowell

Жыл бұрын

@@ArielZab it's mostly for edge cases, say for dealing with the notch on iPhones or other UI issues like that

@ArielZab

Жыл бұрын

@@KevinPowell i need to use it but i cant get it to work & I dont see a lot of tutorials on it

Maybe you don't make me love CSS more, but at least hate it less 😅

Can we not enjoy css while we have you?❤

this is what we used to call magic

Worked for web browsers but not for Safari in IPhone :(

somebody put this on codepen ! lol

At 1:32 mark you mention there is a way to get it to work if css doesnt support the -webkit-line-clamp, is there a js polyfill? kzread.info/dash/bejne/lGqduKSyc7LeaKQ.html

@KevinPowell

Жыл бұрын

I'd rather use a prefix than require JS 🤷‍♂️

wekbit

Everytime I think I know all of the display types, I get hit with another one.

@deusprogrammer_thekingofspace

Жыл бұрын

Since I have your attention, just wanted to say your videos helped me a lot with modernizing my Twitch App I am working on. I am eternally grateful. Sent a lot of students to your videos too where I work. Keep up the amazing work!

line-clamp doesn't support all browsers. We need use -webkit-line-clamp.

it doesn't work with Safari so not a good option.