title: Truncate the text and show it on mouseover
body: <p>I need to truncate the text(with ... at the end) and on mouseover the entire text should get expanded.</p>
  
  <p>I have tried to truncate by the below code. Problem with this code is, it expands the content on click of the <code>...</code> but I need it to get opened when user mouse over anywhere on p tag</p>
  
  <pre><code>var len = 100;
  var p = document.getElementById('truncateMe');
  if (p) {
  
    var trunc = p.innerHTML;
    if (trunc.length &gt; len) {
  
      trunc = trunc.substring(0, len);
      trunc = trunc.replace(/\w+$/, '');
  
      trunc += '&lt;a href="#" ' +
        'onmouseover="this.parentNode.innerHTML=' +
        'unescape(\''+escape(p.innerHTML)+'\');return false;"&gt;' +
        '...&lt;\/a&gt;';
      p.innerHTML = trunc;
    }
  }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/cf28w6qw/" rel="nofollow">DEMO</a></strong></p>
  
  <p>I am looking for an easy way to do it.</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong><em>PS: No CSS solution please, as it is not compatible with all browsers (IE7).</em></strong></p>