Supporters of End User
Web

Truncate text in list view and add mouseover preview

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:Javascript and jQuery; Libraries and Lists; Views; Content Editor Web Part; MOSS; WSS; 2007; 2010

 

2011-12-05-TruncateText-01.pngI wrote this article last month: Multi line text field in list view: Shorten text and add hovereffect to view full text.

This post is an updated version to support both SharePoint 2007 and SharePoint 2010.

Features

This solution will shorten any text column (single line or multi line) in a list view to a preset length, and append “…” to indicate that the text is truncated. If the text is shorter than the “trigger length”, the cell is skipped.

How to set up

Go get jQuery v1.6.4 from here.

Note that this is NOT the latest version. I have not had the time to find out why v1.7+ does not work.

Download the code for the file “TruncateTextInListView.js” from here Note the different versions for SharePoint 2007 and SharePoint 2010.

Upload both files to a shared document library – or a folder in the root of the site (created with SharePoint Designer). Ensure all users have read access to the location.

Put a CEWP below the list view web part, and insert this code:

<script type="text/javascript" src="/test/English/Javascript/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/TruncateTextInListView.js"></script>
<script type="text/javascript">
	
function init_TruncateText(){
	truncateText('MultilineText',50,'');
}

</script>

Note:
You must change the “src” attribute of the script tags to point to your local copies of jQuery and “TruncateTextInListView.js”.

Parameters for the function “truncateText”

  • fieldName: The FieldInternalName for single line text fields or display name for Multi line text fields.
  • initialLength: The number of characters to display.
  • inPlaceHoverText: This argument is optional and can be text to show in place of the original text – like “hover to read”.

Ask if something is unclear.

Alexander

Comments

kripa

hi

Not able to get the correct output with Sharepoint 2010

Posted 15-Dec-2011 by kripa
ayyappan

ECB menu issue.

I have added this script it's works great. but i am getting the ecb menu. It's overing the popup and looking ugly. even i have hided ecb menu for list items. but it still displaying the menu with Lover triangle image. how to resolve this.

Posted 19-Dec-2011 by ayyappan
ayyappa

After submiting the form the page got refreshed and the jquery not called.

After submiting the form the page got refreshed and the jquery not called results no affect in sharepoint page.

Posted 04-Jan-2012 by ayyappa
Drew

Thanks!

This is fantastic!  Works like a champ on SP2010, many thanks Alexander.
 
Drew

Posted 08-Nov-2012 by Drew
sandwich

SharePoint 2013

does this work for sharepoint 2013? been trying to make it work (with 2010 js files), but no luck so far..

Posted 11-Jul-2013 by sandwich
Bryan

Please fix for Js 1.7+

It would be really appreciated if you could update this script.
thanks

Posted 22-Oct-2013 by Bryan
coach outlet store online

http://www.coachoutletstoreinc.com/

We know the old adage - that April showers bring coach factory outlet - but we're impatient! We want those heartwarming, spirit-lifting plants to blossom now! You just never know, and even on coach outlet store online when you're not looking for trouble, trouble could find coach factory outlet; in the form of a good ol' fashion fisticuffs.This coach outlet store roundup mourns Peaches Geldof, celebrates tiffany jewelry's marriage, embraces spring, and reveals the face of a new coach factory fragrance.Even if we're not Fashion tiffany and co bound, we're always seeking coach outlet online. This time it comes in the form of michael kors outlet online, classic stripes, and statement heels.The true religion jeans is always chic and exact. There is such a sense of michael kors outlet in wearing steely gray, especially when you do it with coach outlet. What you might not know: what a day in the life of a pro celine outlet really looks like. If you're unsure, I'll make it easy for you to decide: the coach factory outlet is YES.The tasty treats from toms shoes company are hittin' the spot with their sweet breakfast-y flavor and adorable elephant shape.alexander wang shoes to the present day, the alexander wang bags features stunning costumes but is still not dramatic enough to do justice to its glamorous subject.So, when celine bags offered me the chance to stay at a hotel, have a consultation with a sleep doctor and have my own little sleep sanctuary, that was an offer I definitely wasn't about to turn down.The toms usa has just opened a new website, so now you can see what you've been missing out on.

Posted 09-Apr-2014 by coach outlet store online
yitoyitoytyo

yitoyitoytyo

El más lujoso de los modelos Replicas Relojes Submariner Aqua Terra tiene un caso de 41,5 mm oro rojo de 18 quilates montado en Rolex daytona un brazalete que empareja o cuero marrón. Es el deporte una esfera gris o plata con índices aplicados pulido oro Rolex submariner replica rojo satinado, el cual se presentó una capa de Superluminova blanca.

Posted 16-Apr-2014 by yitoyitoytyo

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: