CSS Line_Clamp - No More Text Length Woes

[@keaton718]

We're so blessed that people like Paul can somehow make a living by giving us free tips like this.

[@techjavaid6177]

You are the only person who i have seen using 767px for mobile, and it is perfect for all mobile devices, i use 767 for mobile and 768-1024px for ipad etc. Well done mate

[@John.Rearden]

IMHO, your channel is a great resource for what’s happening in the Wordpress ecosystem with pagebuilders and plugins, features and comparisons. Leave the code snippets for others, there are plenty who deal with such nitty gritty. You focus on the big picture. Food for thought, cheers.

[@paulhildmann8392]

Thanks for the tip. This will work perfectly for testimonials.

[@2gusIstudio]

Thank you very much. I've been watching you for a very long time. You're just a great fellow. 🎉

[@derekshort]

Great video!

[@WPTuts]

Glad you enjoyed it

[@aleemanesh]

This guy's videos are a life saver. Thanks a lot Paul. Every single one of your tutorials are useful and informative.

[@WPTuts]

Glad you like them!

[@DonDiablo_US]

Thank you so much. I needed this so bad. Thank you. 😊

[@WPTuts]

You are so welcome!

[@quintrahaman]

Awesome! Thanks for sharing!

[@jaoortega]

This is very very very very useful. It addressed a huge problem always on loops... Thanks Paul C.!

[@WPTuts]

Glad it was helpful!

[@webtappers7863]

Thanks Paul.

[@EdHallPhotoFL]

Thanks for the video, Paul. I was implementing this over the weekend and found for older devices I had to set a height declaratrion. It was suggested to use line-height multiplied by the number of lines to come up with the "magic number" for the height which worked great.

[@WPTuts]

Great tip if you have to target older unsupported browsers. 😁👍

[@AP-ew4qd]

Thank you Paul, I was just deliberating this issue a few hours back ... now I have a solution! Great video as usual, I'm also on Bricks.

[@nicholasaguirre2558]

I love this. Super useful with mainly sites.

[@alexanderroodt5052]

Very neat thank you

[@WPTuts]

Very welcome

[@mksundstrom]

I'd still use Exceprt but I'd apply the clamp on the excerpt. Excerpt is just more practical as many themes and layouts assume it's being used, and I suspect it's best for SEO too.

[@WPTuts]

So would I or a custom synopsis field. This demo was using the content field to show an easily visible example.

[@WIThEMaN2]

Great advanced small quick tip for lots of use cases. Thanks!

[@WPTuts]

Glad it was helpful!

[@carbonrich]

As a pedantic designer who got into usability testing far far too late, I'm interested how this would perform with users, my guess is: badly. As much as I love this from a design pov, I think the real solution to this kind of design problem is >>> content strategy and a decent editor who understands design as well as copy...

[@WPTuts]

In a perfect world I would 100% agree. From a practical point of view after handing sites off to clients, I think it’s a viable option for design integrity. It’s all about compromising. 😁

[@franky9234]

Thank you! I've been looking for something like this for a long time.

[@WPTuts]

Glad I could help!

[@PswACC]

Hi Paul. Since you are using the CSS selector box inside of Bricks, You don't need to write the class name. You would use the new root selector. %root% { }

[@WPTuts]

This is true, but I wanted to make sure anyone could use the code and not just Bricks users. Also, once you save the code, Bricks automatically converts it to %root%. 👍

[@PswACC]

@@WPTuts I was not aware of the conversion.

[@WPTuts]

@@PswACC I only found out when recording the tutorial as it kept changing it which was a PITA for the tutorial. Lol 🤦‍♂️

[@ib4112]

This is nice, however i am not sure how much text it will add to the page if we have lot of post on the page and each is clamped to 3-5 lines. isn't better to use short description to keep page size small. I agree with you if we have short description of 20-30 words then this is great way to do it, i hope you understand my point of view.

[@WPTuts]

I used a more extreme example to demonstrate the technique. I’d use it either with a custom field or the excerpt function in the real world. Text overflow would be minimal then. 👍

[@WickyDesign]

Great tip!

[@WPTuts]

Cheers Mark :)

[@martinbarron6545]

Hi, great vid!. Can't seem to get it working on mobile, even with a media query though?

[@Pedant_Patrol]

Funny. I literally implemented this solution just two weeks ago. Great tip!

[@WPTuts]

It's a really nifty little function of CSS. :)

[@baliflorent6971]

Thanks Thanks Thanks.

[@LH-gb2lh]

I can't understand the advantage: if you want to show 5 lines in a textblock, why not place 5 lines in it? Or is it that if you click on it, the full text can be seen in a pop up?

[@tavusion]

Can't find link to code, please share.

[@WPTuts]

Odd, I added it to the description and it's gone! I've re-added it now and added it here too: learnbricksbuilder.com/control-text-line-length-with-line-clamp/

[@crazyworld7485]

Thank for all video. Please review best plugin for SEO 😊

[@WPTuts]

I’m an SEOPress user, so I don’t think I’d be overly objective in a review. 👍

[@JordyKolster]

What About accessibility?

[@WPTuts]

In what way?

[@TobiasKarnetzke]

Nice solution. However, all the text still remains in the source code, which is something to keep in mind.

[@WPTuts]

It is. But, personally I would either create a custom field for a synopsis of the content or use the excerpt and limit that using this method. That way, the amount of text would be neglible in comparison to the full article content.

[@2gusIstudio]

We are waiting for the continuation of the elementor

[@WPTuts]

Continuation of the Elementor what?

[@sandeshchauhan7780]

Very useful but we can't read the entire text after applying this.

[@WPTuts]

That’s kinda the point. If the content falls below the line quantity set then it’s all readable. It’s a compromise between design integrity and content. It’s one way of doing things but not the only way. 😉

[@megrikyan]

Will it go with Elementor too?

[@WPTuts]

Absolutely. Anywhere you can apply a CSS class you can target it. :)

[@SamWereb]

0:32

[@thebuildreview]

You forgot to add the code to the comments ;-)

[@WPTuts]

It's under the resources and link section in the video description. As there's a lot of code there, it's on my Bricks website and includes the CSS and HTML code.