Truncate text in list view and add mouseover preview

08.12.2011 I have updated to v1.1 to fix a bug preventing the use of FieldInternalName for addressing the fields. Thanks to Ed MacIntosh (@cosmo132) for finding the bug.

---

I have previously done this article 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 character to display.
• inPlaceHoverText: This argument is optional and can be a text to show in place of the original text – like “hover to read”.

---

Ask if something is unclear.

Alexander