I am working on a Team site inside SharePoint server 2013. And on the list views I am showing the Description field, which is of type enhanced rich text. Currently we are facing these problems:-

  1. If users add long text inside the Description field the whole list view will became not very user friendly.

  2. On small sized screens the Description field will expand vertically instead of horizontally , also causing the whole list view to be out of layout.

So can anyone advice, on how to find a solution. I was thinking if this is possible or not:-

  1. To force the Description field to show only the first n characters (let say the first 200 characters) and without any images when it is being displayed inside the lists’ views. And if the user click on the list item or edit the item then the full Description will be shown? I am using an on-primise deployment so I have full control over the farm

You can use CSR to show first N characters.

(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 Body field on list view 
        "Body": { "View": bodyFiledTemplate } 



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

    var bodyValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 

    //This regex expression use to delete html tags from the Body field 
    var regex = /(<([^>]+)>)/ig; 

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

    var newBodyValue = bodyValue; 

    if (bodyValue && bodyValue.length >= 200) 
        newBodyValue = bodyValue.substring(0, 200) + " ..."; 

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


Have a look here.


There is similar question with answer

| improve this answer | |
  • Have to be strict about these terms... this code is CSR (Client Side Rendering) and you have to set a JSlink referencing this CSR file on every view/field you want this CSR executed. Note: you can use JSlink to point to a JavaScript (eg. jQuery code that changes the page) and not use CSR – Danny '365CSI' Engelman Oct 28 '15 at 7:10

Not the answer you're looking for? Browse other questions tagged or ask your own question.