โ–ผ
Streaming live at 10am (PST)

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.

1 Like