CODEWITHSUNDEEP
javascriptjqueryhtml
user3932810
user3932810

Reputation:

Truncate the text and show it on mouseover

I need to truncate the text(with ... at the end) and on mouseover the entire text should get expanded.

I have tried to truncate by the below code. Problem with this code is, it expands the content on click of the ... but I need it to get opened when user mouse over anywhere on p tag

var len = 100;
var p = document.getElementById('truncateMe');
if (p) {

  var trunc = p.innerHTML;
  if (trunc.length > len) {

    trunc = trunc.substring(0, len);
    trunc = trunc.replace(/\w+$/, '');

    trunc += '<a href="#" ' +
      'onmouseover="this.parentNode.innerHTML=' +
      'unescape(\''+escape(p.innerHTML)+'\');return false;">' +
      '...<\/a>';
    p.innerHTML = trunc;
  }
}

DEMO

I am looking for an easy way to do it.

Thanks in advance.

PS: No CSS solution please, as it is not compatible with all browsers (IE7).

Upvotes: 3

Views: 13737

Answers (2)

Joffrey Maheo
Joffrey Maheo

Reputation: 2919

You can use Jquery Like this :

HTML :

<p>Some Text</p>

JS :

var lengthText = 30;
var text = $('p').text();
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";

$('p').text(shortText);

$('p').hover(function(){
    $(this).text(text);
}, function(){
    $(this).text(shortText);
});

DEMO : http://jsfiddle.net/1yzzbv4b/2/

Or you can also achieve this with css3 property text-overflow:ellipsis;

CSS : 

p{
    text-overflow:ellipsis;
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
}

p:hover{
    text-overflow:clip;
    width:auto;
    white-space: normal;
}

DEMO : http://jsfiddle.net/1yzzbv4b/

Upvotes: 5

bvx89
bvx89

Reputation: 888

Assuming that you set the class of your p-elements to be of escape-text, the following jQuery-code should work.

$(document).ready(function() {
    $ps = $('.escape-text');


    $ps.each(function(i, el) {
        $(el).data('full-text', el.innerHTML);

        strip(el);
    });

    $ps.on('mouseover', function() {
        $(this).text($(this).data('full-text'));
    }).on('mouseout', function() {
        $(this).text(strip(this));
    })

});

var length = 100;
var strip = function(el) {
    el.innerHTML = el.innerHTML.substr(0, length) + '...';
}

Upvotes: 0

Related Questions