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: