Muszę obcinać tekst (z ... na końcu) i na mousever cały tekst powinien zostać rozszerzony.

Próbowałem obcięć poniższy kod. Problem z tym kodem jest, rozszerza zawartość na kliknięciu ..., ale potrzebuję go, aby otworzyć, gdy użytkownik myszą nad nigdzie na znacznik

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

Szukam łatwego sposobu na to zrobić.

Z góry dziękuję.

PS: Nie ma rozwiązania CSS, ponieważ nie jest zgodny ze wszystkimi przeglądarkami (IE7).

3
user3932810 12 sierpień 2014, 13:49

2 odpowiedzi

Najlepsza odpowiedź

Możesz użyć takich jak jQuery:

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/

Możesz też osiągnąć to dzięki właściwości CSS3 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/

4
Joffrey Maheo 12 sierpień 2014, 10:15

Zakładając, że ustawiasz klasę swojego p - elementy mają być z escape-text, następujący kod jQuery powinien działać.

$(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) + '...';
}
0
bvx89 12 sierpień 2014, 10:05