Jump to content

CSS to limit blog excerpt to three lines?

Recommended Posts

Site URL: https://www.houseofzeus.ca

Hi, on my home page (scroll down for Recent Posts) and blog page, I included an excerpt for each post as a teaser. Currently, I am manually ensuring that they fall within three lines on the home page and within two lines on the blog page. Is there any way to make it so that the excerpts will show a maximum of three lines for any and all excerpts through a custom CSS code?

If possible, I would like this to be true for both desktop and mobile/ tablet view!

 

The password to the site is: test

Thank you!

Screenshot (812).png

Screenshot (813).png

Link to comment
15 hours ago, HoZ said:

@tuanphan I am on a Personal Plan at the moment! But planning to upgrade to Business Plan in a year (if that makes any difference).

Add to Page Settings > Advanced > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Cropping-Text-Without-Breaking-Words-jQuery-Limit-Text/limit.text.min.js"></script>
<script>
$(function () {
  $('.summary-excerpt p').addClass('cuttext');
$('.cuttext').limitText({
length: 140
});
})
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
22 hours ago, tuanphan said:

Add to Page Settings > Advanced > Header


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Cropping-Text-Without-Breaking-Words-jQuery-Limit-Text/limit.text.min.js"></script>
<script>
$(function () {
  $('.summary-excerpt p').addClass('cuttext');
$('.cuttext').limitText({
length: 140
});
})
</script>

 

I won't be able to use this until I upgrade to a Business Plan, is that correct?

Link to comment
4 hours ago, HoZ said:

I won't be able to use this until I upgrade to a Business Plan, is that correct?

If you are on trial plan, you can use

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 years later...
On 7/15/2020 at 1:15 AM, tuanphan said:

Add to Page Settings > Advanced > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Cropping-Text-Without-Breaking-Words-jQuery-Limit-Text/limit.text.min.js"></script>
<script>
$(function () {
  $('.summary-excerpt p').addClass('cuttext');
$('.cuttext').limitText({
length: 140
});
})
</script>

 

Are these scripts for limiting text in summary blocks still working? I've tried adding to my page both in Header Injection and also in Advanced Code Injection (7.0) and neither are working. Thanks!

Hey, I'm Jin (he/him). I'm a front end dev learning to make custom sites in Squarespace.

If you find my suggestions helpful, please upvote & like!😺

 

Link to comment
  • 4 months later...
On 7/15/2020 at 9:15 AM, tuanphan said:

Add to Page Settings > Advanced > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Cropping-Text-Without-Breaking-Words-jQuery-Limit-Text/limit.text.min.js"></script>
<script>
$(function () {
  $('.summary-excerpt p').addClass('cuttext');
$('.cuttext').limitText({
length: 140
});
})
</script>

 

Trying to use this now on my blog collection page, but won't work.

Blog excerpts still going over the limit with no ellipses.

Link to comment

there is a CSS way to do this: you can try this webkit property line-clamp. It's actually got really good coverage nowadays ("line-clamp" | Can I use... Support tables for HTML5, CSS3, etc) but not everyone likes prefixed css, but this will do the text-ellipsis thing too! if the odd random browser doesn't support it (i'm looking at you Opera Mini), it will just overflow. You could add a max height that calculated it based on the line height to try to catch that though. change the line-clamp to the number of lines you want.

.blog-excerpt-wrapper p {
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

if you want the fall back option too then work out what your line-height is. it's probably 1.8em, but you can check this in the dev tools. so if you want 3 lines you could add

.blog-excerpt-wrapper p {
  max-height: 5.4em; /* this is 3 * 1.8em */
}

I'd probably just add the first block and it'll overflow if the browser fails. making the max-height work with the webkit line clamp might produce some odd effects.

 

Extra Credit work:

you could of course combine this into a css calc with a variable which would also be lovely, but you should be aware that the custom css in squarespace doesn't love css calcs (FUN FACT: this is because it's not CSS, it's actually a LESS compiler), so you have to trick it a little by escaping the calculation (but escape it in a LESS way not a javascript way). so to have a nice version you could add this to your custom css. 

.blog-excerpt-wrapper p {
    --max-lines: 3;
    --line-height: 1.8em;
    overflow:hidden;
    text-overflow:ellipsis;
    max-height: calc(~"var(--max-lines) * var(--line-height)");
    display:-webkit-box;
    -webkit-line-clamp: var(--max-lines);
    -webkit-box-orient: vertical;
}

 

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.