How to Truncate a multiline column in a SharePoint List 2013

Question

I am relatively new to SharePoint and have a few questions. I was wondering if someone could help me with some custom settings in a SharePoint list. I have a column that is set to a "Multiple lines of text". I am wanting to find a way to have it only show the first line of text and then have a link or something similar to click and show all the text only when it is needed. This will make the list look cleaner and have the rows not be so spread out.

I have been researching online and can mostly only find results for 2007/2010. I am working in SharePoint 2013 and I have also downloaded SharePoint Designer.

I would appreciate any suggestions or a direction to be pointed in.

Thanks!

Answer 1

Note:

in June 2017, Microsoft disabled the use of JavaScript in a Calculated Column

That means given answers may not apply for newer SharePoint versions

For long explanation and work arounds see:
June 13th 2017 Microsoft blocked handling HTML markup in SharePoint calculated fields - how to get the same functionality back

---

Original answer:

I pulled some scribles out of my OneNote, several options:

CSS

Add some extra styles to the existing CSS classes

    .ms-vb2  .ms-rtestate-field{
        max-width:250px;
        max-height:38px;
        overflow:hidden;
    }
    .ms-vb2  .ms-rtestate-field:hover{
        max-height:none;

    }

In Chrome I use the StyleBot plugin to fool around with CSS on WebPages.

You can also add a Content Editor WebPart on the ListView page to add this CSS

CSR - Client Side Rendering (SP2013/Online only)

MSDN: https://code.msdn.microsoft.com/office/Client-side-rendering-code-93e7077d

    function bodyFieldTemplate(ctx) {
        var bodyValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
        //This regex expression is used to delete html tags from the Body field
        var regex = /(<([^>]+)>)/ig;
        bodyValue = bodyValue.replace(regex, "");
        var newBodyValue = bodyValue;
        if (bodyValue && bodyValue.length >= 100)
        {
            newBodyValue = bodyValue.substring(0, 100) + " ...";
        }
        return "<span title='" + bodyValue + "'>" + newBodyValue + "</span>";
    }

You need to add more JavaScript code to get your See More UX

Helpfull links

• http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow_hover
• http://officepowerups.com/2014/02/10/editing-text-in-a-sharepoint-list-view/
• https://stackoverflow.com/questions/22386170/sharepoint-2013-make-calculated-column-based-on-custom-column

Oh! And one more thing...

JavaScript and HTML in a Calculated Column (ICC)

For quick prototyping I stuff HTML+JavaScript in a Calculated Column (and then instruct the 5 US$ an hour programmers in India to replicate the behaviour in more solid code, although to be honest most often the client is fine with my ductape approach)

• Create a Calculated Column
• Set the datatype to Number

• Paste the Formula

  ="<STYLE>a.icctt:hover {text-decoration:none;}" 
  &"a.icctt span {z-index:10;display:none;width:200px;padding:5px;margin:20 0 0 -340;text-align:left;}"   
  &"a.icctt:hover span{display:inline;position:absolute;color:#111;border:1px solid #DCA;background:#fffAF0;}"    
  &".callout {z-index:20;position:absolute;top:130px;border:0;left:-120px;}"
  &"</STYLE>"
  &"<img src='/_layouts/images/blank.gif' onload=""{" 
  &"function ICCmyTR(me){while(me.tagName!='TR'){me=me.parentNode}return(me)}"    
  &"function ICCmyTD(me){while(me.parentNode.tagName!='TR'){me=me.parentNode}return(me)}" 
  &"function ICChide(me){me.style.display='none'}"    
  &"function ICChideheader(TRnode,n){ICChide(TRnode.parentNode.parentNode.firstChild.firstChild.children[n])}"    
  &"function ICCcolNR(me){TR=ICCmyTR(me);myTD=ICCmyTD(me);for(i=0;i<TR.children.length;i++){if(myTD==TR.children[i]){break;}}return(i)}"  
  &"function ICCcontentNode(me){while(me.firstChild!=null){me=me.firstChild}return(me.parentNode)}"   
  &"function ICCprevTD(me){return(ICCmyTD(me).previousSibling)}"  
  &"function ICCshort(me){P=me.firstChild;if(!P)return;"      
  &"if(P.className=='ms-rtestate-field'){S=(ICCcontentNode(P).innerHTML);"        
  &"if(S.length>1){P.innerHTML='<A HREF=# class=icctt>'+S.substring(0,15)+'...<span>'+P.innerHTML+'</span></a>';}}}"  
  &"function ICCshortenAll(me){TD=ICCmyTR(me).firstChild;do{ICCshort(TD);TD=TD.nextSibling;}while(TD)}"
  &"ICCshortenAll(this);"
  &"}"">"
  

Notes:

• Full explanation on Why this works at: http://www.viewmaster365.com/#/How
• You have to add this column as the last one in your View
• It will shorten all Previous Long Text Columns
• This is for Quick Development only,
  it adds 1200 bytes of code per list item to the Webpage
  You can extract the logic and offload it to a CSR solution
  do not blame for not sharing a solution that cost me 20$

CalcMaster Bookmarklet to edit Formulas

It is a PITA to debug Calculated Columns. Because you don't get feedback until you save a Formula and you end up having to click multiple times to get back to your Formula.

I have written a small 'CalcMaster' bookmarklet which hooks into the formula-editor and does a save of the Formula on every keypress; giving immediate feedback.
Published a first version on GitHub:

https://github.com/Danny-Engelman/CalcMaster

iCSR iCSS iJS iCC1

Answer 2

i would like to add that Danny Engelman answer is more than perfect and at his CSS part i find very helpfull to complete it by nowrap

  .ms-vb2  .ms-rtestate-field {
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

Answer 3

Danny's CSS method worked for me in sharepoint online. The only thing I would add is giving folks an indication of where/how to add css to a single sharepoint page. This link is helpful: https://sharepoint.protiviti.com/blog/Lists/Posts/Post.aspx?ID=169