How To Limit Lines Of Text With CSS Only

Подписаться 1,6 млн

Просмотров 111 тыс.

50% 1

Doing vertical text overflow in CSS is incredibly difficult and many people think it is impossible, but that is not true. In this video I will show you 2 different ways to limit the number of lines of text in a box. I will also show you how to expand/collapse those lines of text using only CSS with no JavaScript.
📚 Materials/References:
Kevin’s Video: • How to set a maximum n...
:has Selector Video: • This Is So Much More T...
:has Selector Article: blog.webdevsimplified.com/202...
CSS Max Lines Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:48 - Webkit Technique
03:35 - My Technique
07:44 - Expand/Collapse Buttons
#CSSExpandCollapse #WDS #CSS

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 195

@beinyourguard Год назад

what I like about Kyle's videos is that he does not edit the parts where he messes up. he acknowledges and looks for the error instead of recording it again

@ontheruntonowhere Год назад

Agreed, and I like that he messes up a lot. Makes me feel better about my own mistakes.

@BGdev305 Год назад

you're 100% correct.. his mistakes and corrections actually help me understand things even more.

@MrOmaromran Год назад

and he rubs his nose immediately when he messes up.

@shreekharr3940 Год назад

I am glad you and plenty others like it, but for me, especially in long learning sessions, can be distracting and even irritating at points.

@ontheruntonowhere Год назад

@@shreekharr3940 It's free, whatcha gonna do?

@ilovelctr Год назад

Both you and Kevin and excellent, and so is the content of both of you! This is such an eye-opener. CSS is becoming such that with it it's possible to implement features which were previously only possible using JavaScript.

@MarlonEnglemam Год назад

this is EXACTLY the task I've been working on and was having some trouble with because I had a lot of different scenarios and eventually one of them would just mess everything up, thank you!

@NoName-1337 Год назад

You can add "text-overflow: ellipsis;" to your styles to add the 3 dots for the overflow text if you want to.

@boring91 Год назад

That's not gonna work.

@opjoter Год назад

You misunderstood the problem

@HorsiMusic Год назад

This limits to only 1 line.

@atchaukhac7731 Год назад

@@boring91 it will if use it with "-webkit-box-oriented: vertical;"

@djondavid Год назад

Best/most useful mini CSS tutorial yet. Thank you so much for your great content.

@EvertJunior Год назад

That line limit is very nice, but the css only expand button I'm not sure is WCAG compliant and might be confusing for screen readers users so It's probably best to give it an aria-hidden prop since the entire text will be readable because screen readers don't consider css styles.

@ontheruntonowhere Год назад

I was wondering about this myself, but I think aria-hidden is unnecessary in this case since the collapsed state is purely visual decoration. The complete content should always be available to assistive devices, letting the user decide whether to skip on to the next. It's a bit different than an accordion where the entire content block is hidden.

@EvertJunior Год назад

@@ontheruntonowhere but the input is a focusable element so it might confuse the user because checking the input won’t do / announce anything

@ontheruntonowhere Год назад

@@EvertJunior Yes, great point. I yield!

@Crispypoyo Год назад

I literally searched this up about two weeks ago because I needed it for a project. Thank you for this vid!

@SrinivasReddy07 Год назад

Kyle, you simply nailed it as you do always. So much thank you.

@kaylemaclou Год назад

Brilliant! Thanks Kyle ... and Kevin.

@mykalimba Год назад

I thought I was experiencing déjà vu, but I wasn't... I was thinking of the video just like this that Kevin Powell released about a week ago! Same thumbnail concept, too!

@wazzadev7209 Год назад

You have no idea how much I needed this, thanks so much man.

@___Kevin Год назад

Well explained and very useful. Thank you

@ChesterRivas Год назад

Great video as always. Keep going.

@FunBSDpami 3 месяца назад

Great job! Thanks

@moherna3323 Год назад

Great content bro, very useful!

@ay2s389 Год назад

Wow nice tips! Thanks!

@kuoyulu6714 5 месяцев назад

this is so cool and useful !

@studyingasyouwere Год назад

Thank you for the tips as always!

@wayneswildworld Год назад

Love this. Thanks for sharing

@Solo_playz 2 месяца назад

What a dynamic creativity with just CSS 🤯

@abrotherinchrist 9 месяцев назад

Your videos are a rabbit hole of information that I can't stop watching.

@zeyouR Год назад

thankyou for teaching. amazing content

@pablitocodes Год назад

Great content. Congrats on your success.

@aneliayacheva6671 Год назад

oh I so needed this in one of my recent projects.. thank you, I will use it :))))))))))

@thienthuannguyenlong6830 Год назад

tks u verry much about your knowledge

@marufmarzuq Год назад

Kyle this is d best video on this topic 💜💜

@shneornagar6147 Год назад

Great content! Thanks a lot 🙏

@paulthomas1052 Год назад

Excellent little trick. Thanks :)

@webartem Год назад

Wonderful solution! The only thing I would do another way is the text into the button - I would use instead CSS prop "content" because it keeps all text content in markup and lets a developer use variables here (from CMS or a translation). I suppose the label is better for accessibility as well.

@shivshankarshejwal6728 Год назад

This was good one , got to learn a lot

@mind_of_a_darkhorse Год назад

Great tips!

@gioba4912 Год назад

You're a genius! Thanks for the tutorial.

@GstarYen Год назад

You are my life saver! Thank you!

@MetuAmarachi Год назад

he does not edit the parts where he messes up. he acknowledges and looks for the error and he is so handsome

@broadshare Год назад

Thank you. The kings of css, we want a css framework from Kyle and Kevin.

@poopumpthekids4208 Год назад

Very Cool idea for my project

@pritampodder12 Год назад

Wow! That's really some advanced level CSS 😘😘

@midhakhan3295 Год назад

Great tip

@GermanEmmanuel Год назад

Just what I needed

@avneet12284 Год назад

This was so amazing

@-d3d9ex97 Год назад

great work

@IsfaharUddinNishan Год назад

Whatever! I still watch your videos. Love you bro ❣️

@kyrill19 Год назад

Kyle is so good with this. Thnx!

@codeWithMete Год назад

Hello, I just create my channel, can you support?😊

@dand4485 Год назад

Great video. Just curious when the next CSS battle... 😁

@theDanielJLewis Год назад

I'd love to see a full tutorial!

@stillready6405 Год назад

Damn after years of CSS I still can learn new things from you or Kevin :D

@AleMadLei Год назад

Thank you! This looks really cool. My only concern is accesibility, I think a screen reader would not be able to transmit the CSS text content and will not linit the content shown. Do you think that could be handled CSS only?

@e-benz Год назад

cool tutorial, tnx

@7heMech Год назад

I was just about to search for how to do that!

@slim_shdy Год назад

You are a wizard ❤

@AveLenivius Год назад

Really cool

@kelvinclark3474 Год назад

Awesome 👍

@Vir7uaLGameplays Год назад

Holly shoot this is life changing level thanks!

@aram5642 Год назад

Yes yes yes: for the vendor-prefix-free clamping technique! No no no: for text in css content (not localizable, poorly adoptable by framework components). A great video as always!

@GabrielSoldani 8 месяцев назад

Use together with content: attr(data-label-expand); and content: attr(data-label-collapse); if you want to keep it localizable and outside your CSS.

@FireGames25 Год назад

Btw you can add lorem as a language to your code spell extension, so it stops detecting it as errors

@Amr-ep3vl 8 месяцев назад

I love how you were going nice and slow and explaining things clearly. And then the "has" property kicks in and you go full throttle and I don't understand what the hell just happened :D

@ngochunglongnguyen4523 Год назад

This is awesome, make me want to this, add transition animation, it'll be smooth and look modern.

@alexshel8578 Год назад

this is awesome

@Tony.Nguyen137 Год назад

Using input checkbox as button is really a cool approach that I didnt know. I always hided the checkbox and used a label inside a button ❤😊

@nomad100hd Год назад

Using a checkbox is bad practice because it is not accessibility friendly.

@Tony.Nguyen137 Год назад

@@nomad100hd yeah. You‘Re right. Besides accessibility I tried the code on my ipad and didn‘t get the same result.

@edgarsilvax Год назад

Thanks!

@WebDevSimplified Год назад

You're very welcome!

@dangoldsmith3039 5 месяцев назад

Very cool approach… I love it thanks kyle. The only shame is you can’t smoothly animate between the checked states can you? So the boxes smoothly animate to and from the expanded style.

@randomride6057 Год назад

I probably would have quit web dev by now if it were not for you, Kyle. You are the best web dev teacher out there, no paid course even compares to your videos. Thank you a million times!

@abinjoseph5028 7 месяцев назад

great!

@scottmacintyre7385 Год назад

Thanks for the great video. I'm trying to do limited text lines with ellipsis in a table cell using css but can't get it to work. Any suggestions would be a great help.

@ElkunCoding Год назад

Awesome.

@spoonmanchen7631 Месяц назад

Can you provide tips on how to make the transition in 'p' height more smoother?

@rama3018 Год назад

Wow , your vidio so good bro , yeah i like to learn your vidio and practice 😂

@link2yasmeen778 Год назад

Superbb

@shihab3930 Год назад

Just 😲 wow!

@meganweber5057 Год назад

For the second technique, how do I get text-overflow: ellipsis to work?

@fran_sar 4 месяца назад

Awesome

@ElectricKota Год назад

You can even write it without has selector, just select sibling, by ~ sign, you need to move the input before paragpraph, so you must hide input and pair it with label, and then it will works even on older browsers without has() support. I use this hack for every hsmburger menu, sliding articles and so on.

@MarcoGarri-co8jn Год назад

Great video. Helps a lot. I there any way to implement in wordpress classic editor because after include this is deleted form page and if I use code snippet include ::before

@FoxiAndMolly 5 месяцев назад

hi and great thanks. Is it possible to somehow get the expansion animate a bit slower? smooth scroll like.

@nayemalifahim6701 7 месяцев назад

Make a video on an input box in which height auto increases and max-height 200px scrollbar comes

@patrickconrad396 Год назад

Damn man the ridiculously complex series of js loops I created to do this with pictures and then seeing the simplicity of pure css is insane.

@nomad100hd Год назад

Using a checkbox is bad practice because it is not accessibility friendly. It is better to use javascript.

@calcio437 Год назад

Thanks

@IsfaharUddinNishan Год назад

😃

@smohammadhn Год назад

That was magic ... 😁

@omyele9315 11 месяцев назад

Cool sir

@abdulkadirpolatx 8 месяцев назад

Great

@haidubogdan8712 Год назад

I think a example using and would have been interesting to see. In this case you can solve the expanding animation without the need of a checkbox.

@alex4tm1 Год назад

but then you would always have to click to see the content no matter if it was 3 lines or 20, this solves that problem and when the text is short u see it all, when it's long u see a preview

@haidubogdan8712 Год назад

@@alex4tm1 it's related to using the "hack" checkbox as a toggle element to expand / collapse. For me this is a bit counter-intuitive. The same principle of css ~:checked rule, can be applied on details[open] { ... }

@Enkrod Год назад

This is really nice but doesn't work with Firefox if you don't manually set a flag in your Browser. I'm sure it will work in a near future version, but right now it's something to keep in mind.

@mfsbo Год назад

Hey Kyle, how did you edit the cursor when you placed the last cursor in multiple cursors at wrong place. It was around 1:35 mark

@nguyenvuvietanh9268 7 месяцев назад

can you teach me how to add transition to this wonderful thing?

@sneaky-Jay Год назад

There is an older technique here using the siblings css selector on the checked checkbox. But the drawback is the order of the elements inside the HTML.

@nomad100hd Год назад

It is also not accessibility friendly.

@Martinit0 Год назад

Amazing! Can you code Doom in CSS?

@spreadItWide Год назад

That last minute was wild! Headed to that :has() video now!

@Trazynn Год назад

Can you show us how to make a random image gallery fetching images from a folder?

@thetechie6770 Год назад

Please make a detailed explanation video on Redux

@elkcityhazard Год назад

is has supported yet in firefox? also doesn't that input cause accessibility issues? Nice concepts anyways.

@khoinguyen-ft2ys Год назад

:has selector is a game changer

@sumith Год назад

its cool

@Holy_Frijole Год назад

Any accessibility ramifications since we are using a checkbox in the second example?

@Martinit0 Год назад

Why, the use case is actually to switch between two states. A button is actually meant to trigger an action, not switch between two states.

@revenge425 Год назад

my take is not really, it actually makes more sense than a button : It looks like a button but it is a check that toggle if the content is expanded or not. checkbox should be used for true and false situations and this actually is a true and false situation..

@offgridvince Год назад

Thank you so much for you videos, I'm learning so much. Also, I am having a difficult time with the login tutorial. I can only get the login in route to work in deveplopment. I can't seem to get bcrypt compare to work in production with MongoDB Atlas or Compass. Please help. Thank you.

@offgridvince Год назад

I'll accept knowledge from the chat as well. I reached out with comments on that video, but it's like 2 years old now. Not too active.

@mrbuster3106 Год назад

:has() does not work on firefox, unless you unlock it via configuration. Understandably this means production code cannot use :has() selector :/

@theodorealenas3171 Год назад

Nor qutebrowser. And I'm meant to be able to use it, websites are text with fancy bullshits why wouldn't I be able to use it.

@sushmithasrikanth3836 Год назад

Hello .. can you please teach how to use nodemailer to send a welcome mail automatically after a user registers

@AndreiNedelus Год назад

Great tips, I think instead of the + you can use ~ and will select only the siblings, witch in your code will be only 1 paragraph sibling.

@saroj_kumar Год назад

Plus, it will also work on old browsers.

@broadshare Год назад

@@saroj_kumar I get maaaad every time someone mentions those old browsers😥 where are they, who is even using them? win officially killed IE

@saroj_kumar Год назад

@@broadshare , Though old browsers are not used for personal use, there are still corporate servers and applications that use legacy or may be some previous versions of browsers. On the contrary, as a developer, it's a good practice to always check for the edge case, even if no body uses old browsers, we still have to consider someone around the world might use it and be ready for it.