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

Community resources Webflow Tips
1

Update: Old post (2020) - you can now use if you want (See Browser compatibility in the link below):

By JS => Start point

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

image
image1314×476 87.8 KB

Step 1 of 1 :) - 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:

image
image944×306 29.6 KB

Read more:

2

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!

3

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
4

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

5

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

:smiley:

https://share.getcloudapp.com/NQu1WgeD

6

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?

7

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

Shared with CloudApp

1 Like
9

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

1 Like
10

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

Glad you got it working :webflow_heart:

11

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?

12

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

13

TRUE you can use CSS :slight_smile: (When I wrote this post most browsers didn’t support line-clamp).

Now:

Possible by javascript and three custom attributes.

1 of 3

truncates_card for the card (Wrapper for the button and the truncates text).

image
image1562×550 68.2 KB

2 of 3

truncates_text (for the text)

image
image1327×509 57.2 KB

3 of 3

expand_text for the button

image
image1359×612 58.8 KB

Card structure:

image

**use any structure you want. But the text and the button must be inside the same card.

So this is also valid:
image

Now under Webflow custom code add this code

<!-- expand truncates text on click and hide the expand button -->
<script>
  const expand_text_btns = document.querySelectorAll('[expand_text]');

  expand_text_btns.forEach(expand_text_btn => {
    expand_text_btn.addEventListener('click', () => {
      /* find this truncates text */
      const this_truncates_text =  expand_text_btn.closest('[truncates_card]');
      const this_truncates_p_inside_this_card = this_truncates_text.querySelector('[truncates_text]');
      /* remove the truncates styles */
      this_truncates_p_inside_this_card.style.overflow = "initial";
      this_truncates_p_inside_this_card.style.setProperty('-webkit-box-orient', "initial");
      this_truncates_p_inside_this_card.style.setProperty('-webkit-line-clamp', "initial");
      /* hide expand button */
      expand_text_btn.style.display = "none";
    });
  });
</script>

image

Add custom styles:
image

Publish.

Before Click:

image
image1364×384 36.1 KB

After Click:

image
image1343×457 62.4 KB

DONE :)