CMS - Truncates text (shave.js plugin) - Useful for blog list description

Less than one minute.

Start point

Collection list paragraph inside bind to collection field description with class post-description (We going to use this class as jquery class selector)

Step 1 of 1 :slight_smile: - Including file + Initialization

custom code - Add Shave.js CDN before body ( very lightweight; ~1.5kb).

Shave is a zero dependency javascript plugin that truncates multi-line text to fit within an HTML element based on a set pixel number max-height .

<!-- shave.js - truncates text -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/shave/2.5.7/shave.min.js" integrity="sha256-DHOTIzlEJ2trgv0MBX+fRbkCVUxEGOmP2zp3f8JAtGQ=" crossorigin="anonymous"></script>

<!-- shave.js - Initialization -->
<script>
  shave('.post-description', 70);
</script>
  • Note ==> 70 (70px) not 70 letters.

image

Publish. Go to live site β†’ Done :slight_smile:

Read more:

Hi there. This works but I have issue when I am in a tabbed content. The first page works but when I toggle to another tab, the script does not seem to be called. Any clue?

UPDATE:
I found that custom scipt only works on the first active tab as the scipt will not load when you toggle to another tab. :frowning:
If any of you have a solution to this, let me know. Thanks in advance!

cc: @howiechang

You can actually use CSS to do this without having to load any scripts (although the script above is super light anyway).

<style>
.classname-of-element {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
</style>

If you need this on multiple pages then you can add it to the custom code settings in your project settings. Just wrap in the style tags that I included and paste into the Inside <head> tag section. DOn’t forget to make sure the class name matches your element too.

The -webkit-line-clamp the number here is the number of lines you would like. It will automatically add the ellipsis if it’s needed. You may want to double check this works in Firefox, but I’m pretty sure it does now.

3 Likes

Hey @magicmark Trying to use your method but not having any success, mind taking a look? :raised_hands:

https://preview.webflow.com/preview/portfolio-v2-9fc31b?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-v2-9fc31b&preview=8c6a6b896fb7d3e80e4f96c168f803f0&pageId=5f83cfa34fe84c57c3297cec&mode=preview

Just wrap in the style tags that I included and paste into the Inside <head> tag section.

:smiley:

https://share.getcloudapp.com/NQu1WgeD

i had it there originally and decided to see if it would work in the body, still no luck, am i skipping something else super basic?

You will see the changes on your published site, not in the designer :slight_smile:

Shared with CloudApp

1 Like

Got it! I was confused on what line clamp actually did, now i see :laughing:

1 Like

Yeah, it’s useful if you have a collection of thumbnails to keep the preview text all uniform :smiley:

Glad you got it working :webflow_heart:

Hi Mark,

Works like a charm, thank you!
How can I make it so that, when the user clicks on the ellipsis (or a button or arrow) at the end of the truncated text, the text extends to show the full text?

Hello, Raphael! Could you please tell me if you managed to solve the problem with the button for hiding and expanding text?