Jquery - Tronca il testo per riga (non per numero di caratteri)

Question

Ho bisogno di uno script Jquery per troncare un testo per riga (non per numero di caratteri).

Desidero ottenere un blocco di testo uniformemente troncato. Dovrebbe avere un link "more" e "less" per espandere e accorciare il paragrafo del testo. Il mio paragrafo di testo è avvolto in un div con una classe, come questo:

<div class="content"> 
<h2>Headline</h2> 
<p>The paragraph Text here</p> 
</div> 

La soluzione più vicina che ho potuto trovare su SOF è quella qui sotto (ma `s per l'elemento textarea e non funziona per me): Limiting number of lines in textarea

Molte grazie per eventuali suggerimenti.

Answer 1

Se si utilizzava un carattere a spaziatura fissa, si avrebbe una possibilità di funzionamento, poiché si avrebbe una buona idea di quante lettere si adattano a ciascuna linea, per un elemento di larghezza definita. Tuttavia, se una parola si rompe tra le righe, allora potrebbe essere complicato ..

e: ho trovato un'altra domanda che è fondamentalmente quello che stai cercando - non hanno nemmeno una risoluzione, ma a mio avviso, la l'altezza della linea e l'altezza dell'elemento sembrano più vicine.

"How can I count text lines inside a dom element"

Answer 2

perché non rendere l'elemento p con overflow: hidden; dare l'altezza della linea fissa, caluclate l'altezza del div così id contiene esattamente il numero di linee richiesto e l'unica modifica l'altezza del p da javascript.

p{ 
    overflow:hidden; 
    line-height:13px; 
    height:26px; /* show only 2 rows */ 
} 
<script type="text/javascript"> 
    function seeMoreRows(){ 
     $(p).height("52px"); 
    } 
</script> 

Answer 3

Per un approccio di base, si potrebbe prendere uno sguardo alla proprietà CSS line-height e l'uso che nei calcoli. Tieni presente che questo approccio non tiene conto di altri elementi in linea che sono più grandi di tale altezza (ad esempio immagini).

Se si desidera qualcosa di più avanzato, è possibile ottenere le informazioni su ciascuna riga utilizzando la funzione getClientRects(). Questa funzione restituisce una raccolta di oggetti TextRectangle con larghezza, altezza e offset per ognuno.

Vedere this answer qui per un esempio (anche se un obiettivo non correlato) di come funziona getClientRects().

---

Aggiornamento, ha avuto un po 'di tempo per tornare e aggiornare questa risposta con un esempio reale. E 'piuttosto semplice, ma si ottiene l'idea:

http://jsbin.com/ukaqu3/2

Un paio di puntatori:

• La collezione restituita da getClientRects è statico, esso non aggiorna automaticamente se l'elemento che contiene del le dimensioni cambiano Il mio esempio funziona attorno a questo catturando l'evento di ridimensionamento della finestra.

• Per alcuni strani motivi di conformità di conformità che non sto capendo, l'elemento che si chiama getClientRects on deve essere un elemento in linea. Nell'esempio che ho, io uso un div contenitore con il testo in un altro div all'interno con display: inline.

Answer 4

Ho creato questo piccolo codice jQuery per consentirmi di troncare i blocchi di testo per riga (tramite classi CSS), sentitevi liberi di usarli e commentarli.

Questo è lo jsFiddle, che include anche funzioni troncate per numero di caratteri o conteggio parole. Potete vedere che al momento, ridimensionare la finestra non aggiornerà la visualizzazione del blocco, ci sto lavorando.

/* 
* Truncate a text bloc after x lines 
* <p class="t_truncate_l_2">Lorem ipsum magna eiusmod sit labore.</p> 
*/ 
$("*").filter(function() { 
    return /t_truncate_l_/.test($(this).attr('class')); 
}).each(function() { 
    var el = $(this); 
    var content = el.text(); 
    var classList = el.attr('class').split(/\s+/); 
    $.each(classList, function(index, item){ 
     if(/^t_truncate_l_/.test(item)) { 
      var n = item.substr(13); 
      var lineHeight = parseInt(el.css('line-height')); 
      if(lineHeight == 1 || el.css('line-height') == 'normal') 
       lineHeight = parseInt(el.css('font-size')) * 1.3; 
      var maxHeight = n * lineHeight; 
      var truncated = $.trim(content); 
      var old; 
      if(el.height() > maxHeight) 
       truncated += '...'; 
      while(el.height() > maxHeight && old != truncated) { 
       old = truncated; 
       truncated = truncated.replace(/\s[^\s]*\.\.\.$/, '...'); 
       el.text(truncated); 
      } 
     } 
    }); 
}); 

Answer 5

tl; dr - impostare un altezza sul div contenitore e quindi usare il jQuery dotdotdot plugin

stava per fare esempio impressionante di @Andy E in un plugin, ma poi si rese conto https://github.com/BeSite/jQuery.dotdotdot potrebbe tirare fuori questo . Il nostro caso d'uso è che vogliamo mostrare una linea su larghezze del desktop e due linee su dispositivi mobili/tablet.

Il nostro CSS imposterà il contenitore div all'equivalente di uno o due line-height di conseguenza e quindi il plug-in dotdotdot apparirà per gestire il resto.

Answer 6

Ho creato un piccolo modulo che funziona con puro contenuto di testo, nessun tag nidificato e nessun css-padding sull'elemento contenente testo è consentito (ma questa funzionalità potrebbe essere facilmente aggiunta).

Il codice HTML:

<p class="ellipsis" data-ellipsis-max-line-count="3"> 
    Put some multiline text here 
</p> 

Il Javascript/Jquery:

(function() { 

$(document).ready(function(){ 
    store_contents(); 
    lazy_update(1000); 
}); 

// Lazy update saves performance for other tasks... 
var lazy_update = function(delay) { 

    window.lazy_update_timeout = setTimeout(function(){ 

     update_ellipsis(); 

     $(window).one('resize', function() { 
      lazy_update(delay); 
     }); 

    }, delay); 
} 

var store_contents = function(){ 

    $('.ellipsis').each(function(){ 
     var p = $(this); 
     p.data('ellipsis-storage', p.html()); 
    }); 
} 

var update_ellipsis = function(){ 

    $('.ellipsis').each(function(){ 

     var p = $(this); 
     var max_line_count = p.data('ellipsis-max-line-count'); 
     var line_height = p.html('&nbsp').outerHeight(); 
     var max_height = max_line_count*line_height; 
     p.html(p.data('ellipsis-storage')); 
     var p_height = p.outerHeight(); 

     while(p_height > max_height){ 

      var content_arr = p.html().split(' '); 
      content_arr.pop(); 
      content_arr.pop(); 
      content_arr.push('...'); 
      p.html(content_arr.join(' ')); 
      p_height = p.outerHeight(); 
     } 
    }); 
} 

})(); 

Spero vi piaccia!