Truncate Text

Patrick Fitzgerald May 16, 2007

General

This script is a clever way of automatically truncating the text of a paragraph, without dividing in the middle of a word. You can truncate the text to a length of your choosing. A link is added to expand the text.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer. Etiam venenatis. Sed ultricies, pede sit amet aliquet lobortis, nisi ante sagittis sapien, in rhoncus lectus mauris quis massa. Integer porttitor, mi sit amet viverra faucibus, urna libero viverra nibh, sed dictum nisi mi et diam. Nulla nunc eros, convallis sed, varius ac, commodo et, magna. Proin vel risus. Vestibulum eu urna. Maecenas lobortis, pede ac dictum pulvinar, nibh ante vestibulum tortor, eget fermentum urna ipsum ac neque. Nam urna nulla, mollis blandit, pretium id, tristique vitae, neque. Etiam id tellus. Sed pharetra enim non nisl.

Notes

Created by: Patrick Fitzgerald
Web Site: http://www.barelyfitz.com/
Posted: May 16, 2007

Once expanded it cannot be collapsed again (but that functionality could be added just as easily).
It assumes that the content is plain text with no markup. If there is markup, it is taken into account when counting the text for division pueposes.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: truncateText.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Patrick Fitzgerald | http://www.barelyfitz.com/ */
function truncate() {
  var len = 100;
  var p = document.getElementById('truncateMe');
  if (p) {
    var trunc = p.innerHTML;
    if (trunc.length > len) {

      /* Truncate the content of the P, then go back to the end of the
         previous word to ensure that we don't truncate in the middle of
         a word */
      trunc = trunc.substring(0, len);
      trunc = trunc.replace(/\w+$/, '');

      /* Add an ellipses to the end and make it a link that expands
         the paragraph back to its original size */
      trunc += '<a href="#" ' +
        'onclick="this.parentNode.innerHTML=' +
        'unescape(\''+escape(p.innerHTML)+'\');return false;">' +
        '<span style="font-size: 10px;">[ more ... ]</span><\/a>';
      p.innerHTML = trunc;
    }
  }
}

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  truncate();
});

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="truncateText.js"></script>

Body

Paste this code into the BODY section of your HTML document


<p id="truncateMe">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer. Etiam venenatis. Sed ultricies, pede sit amet aliquet lobortis, nisi ante sagittis sapien, in rhoncus lectus mauris quis massa. Integer porttitor, mi sit amet viverra faucibus, urna libero viverra nibh, sed dictum nisi mi et diam. Nulla nunc eros, convallis sed, varius ac, commodo et, magna. Proin vel risus. Vestibulum eu urna. Maecenas lobortis, pede ac dictum pulvinar, nibh ante vestibulum tortor, eget fermentum urna ipsum ac neque. Nam urna nulla, mollis blandit, pretium id, tristique vitae, neque. Etiam id tellus. Sed pharetra enim non nisl.</p>

Leave a Response

(6 comments)

Hi. The code is great but 2 things. Could you not add a function that after expanding the text would collapse it again & why when using it in conjunction with a database query does it only work on the first record? Many Thanks. Ivor

Ivor Sep 11, 2007

it should contract again after its been expanded

jhn dep Jun 12, 2007

I would like to contract the paragraph as well as expand it. HOW?

marvin starvin May 29, 2007

I think if I knew how to make the argument 'truncateMe' a symbolic variable I could have many instances on the same page - solving Chris's issue. But I don't know how to do that, nor can I figure out how to create a 'Less' box in order to restore the page - and considering Chris's question in the solution would be a plus!

John Moss May 25, 2007

I am trying to use the code many times on the same page for different paragraphs, but only one paragraph appears truncated. Please help. Thanks

Chris Bartolo May 24, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details