javascript - Truncate the text and show it on mouseover - Stack Overflow

admin管理员组

文章数量:1306238

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 patible with all browsers (IE7).

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 patible with all browsers (IE7).

• javascript
• jquery
• html

Share Improve this question Follow edited Aug 12, 2014 at 10:05 asked Aug 12, 2014 at 9:49 user3932810user3932810 1

• 1 And what is escape ? can you provide a demo? – T J Commented Aug 12, 2014 at 9:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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/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/1yzzbv4b/

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) + '...';
}

本文标签： javascriptTruncate the text and show it on mouseoverStack Overflow