Slice Description without cutting words (en)

Slice Description without cutting words de en Title

This blog post will show you how to make the description text shorter without cutting words in half and display the whole description text as a tooltip.


Slice Description without cutting words (de en)_1


Slice Description without cutting words (de en)_2

Even with a tooltip:

Slice Description without cutting words (de en)_3

Just take the Javascript below, save it and link it to your list. How to do that? Check my other blog post here!

// List View - Slice Long String Sample Without Cutting Words
// Patrick ,

(function () {

 // Create object that have the context information about the field that we want to change it's output render 
 var bodyFiledContext = {};
 bodyFiledContext.Templates = {};
 bodyFiledContext.Templates.Fields = {
 // Apply the new rendering for "Beschreibung" field on list view
 "Beschreibung": { "View": bodyFiledTemplate }



// This function provides the rendering logic
function bodyFiledTemplate(ctx) {

 var bodyValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
 // This variable is the maximum chars for the field
 var llength = 25;
 // This regex expression is use to delete html tags from the field
 var regex = /(<([^>]+)>)/ig;

 bodyValue = bodyValue.replace(regex, "");

 var newBodyValue = bodyValue;

 if (bodyValue && bodyValue.length >= llength)
 // Slice the field, from 0 to llength (25)
 newBodyValue = bodyValue.slice(0, llength); 
 // Don't cut the words in between
 newBodyValue = newBodyValue.slice(0, newBodyValue.lastIndexOf(" "));
 else {
 return "<span title='" + bodyValue + "'>" + newBodyValue + "</span>";

 return "<span title='" + bodyValue + "'>" + newBodyValue + " ..." + "</span>";


If you have questions, don’t be afraIT to ask or comment!

Easy, fast and powerful, that’s an afraIT shorty. More from this category here.

Leave a Reply

Your email address will not be published. Required fields are marked *