CSS to limit blog excerpt to three lines?

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!

Which plan do you use? If you use Business Plan, I can give the code to max number of words

@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).

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>

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?

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

7 hours ago, tuanphan said:

If you are on trial plan, you can use

I see, okay. I am currently on just a Personal plan but I will give the code a try when I upgrade! Thanks again.

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!

Nevermind, I found another solution written in plain JS on the forum. For some reason the JQuery just wouldn't work on my site, even with Ajax loading disabled.

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.

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;
}