Ever needed to trim text to fit the height of an area? Shave Module for Drupal helps you do this intelligently by allowing you to truncate text to fit within an html element. Instead of merely tweaking the trim of characters output, set the max-height and Shave library will truncate or “shave” your text accordingly.

How do we do this? The Shave for Drupal module provides integration with the Shave Library. Shave, which ironically enough we developed by the Dollar Shave Club, is a javascript plugin that truncates text to fit within a html element based on a set max-height. It a super lightweight library at ~1.5kb unminified and doesn’t require any other additional libraries.

For those who want the technical side, here is the gist:

Shave is a zero dependency javascript plugin that truncates multi-line text to fit within an html element based on a set max-height. It then stores the diff of the original text string in a hidden span element following the visible text. This means the original text remains intact!

How does the library work? Shave actually maintains the original text after truncation, and instead it adds span and div tags to make the specific adjustments upon page load (or optionally dynamically). The integration only requires a selector and a max height

How to install? Before enabling and installing this module, Download shave plugin from https://github.com/dollarshaveclub/shave into the libraries directory and rename folder to "shave"

How does the Shave for Drupal module work? So, instead of using Drupal’s default trimming mechanism based on number of characters, you can set the max-height and the text will be trimmed accordingly to fit that height. We do this by using a custom text formatter.

The text formatter is called "Shave Formatter,” and it can be used on node display, views, panels, etc. to set the height you wish to shave elements to. That way you can select format on textfield, textarea, etc with a size and it will shave content according to that.

We also provide Shaver classes on elements, That way you can add classes to fields like this "shave-formatter shave-format-30" and it will shave that container text to appropriate size. This important if you want to shave titles, which do not provide by default a text formatter option.

Some more cool stuff about Shave Module? It maintains the original text after truncation. You can use custom ellipsis and strings if you want. And if you are using Japanese or Chinese, Shave even supports non-spaced languages (Non-ascii).

Hopefully this integration check your next project. Check out Shave for Drupal at: https://www.drupal.org/project/shave. Comments, feature requests and bug reports welcome!

Tags: customizationdrupal 7open sourcecontributionDrupal PlanetPlanet Drupalresponsive

Mark Koester
@markwkoester
Mark has worked on Drupal since the early days of D6. He is passionate about open source as well as entrepreneurship. When he isn't building, he enjoys traveling and speaking one of his many foreign languages.
Chengdu, China