Oggi vediamo come troncare o tagliare un testo di un div o di un paragrafo usando solamente jQuery.
Questo metodo può risultare utile, ad esempio usando WordPress per troncare un articolo troppo lungo senza usare nessuna riga di codice php.
[button link=”http://www.targetweb.it/tutorial/2012/scroll-text/index.html” color=”blue” target=”blank” ]Demo[/button]
Struttura HTML
<div id="testo">
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dui condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dui condimentum urna accumsan tristique. Aenean ultrices sollicitudin varius.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dui condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dui condimentum urna accumsan tristique. Aenean ultrices sollicitudin varius.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dui condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dui condimentum urna accumsan tristique. Aenean ultrices sollicitudin varius.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dui condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dui condimentum urna accumsan tristique. Aenean ultrices sollicitudin varius.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dui condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dui condimentum urna accumsan tristique. Aenean ultrices sollicitudin varius.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dui condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dui condimentum urna accumsan tristique. Aenean ultrices sollicitudin varius.FINE</p>
</div><!--testo-->
<div class="controlli">
<p class="leggi">Avanti</p>
<p class='indietro'>indietro</p>
</div>
Script per troncare il testo jQuery
//elimino il trigger di ritorno all'apertura
$(".indietro").hide();
//variabili
var caratteri_massimi = 1000;
var sorgente = $("#testo").html();
//visualizzo versione compressa del testo
$("#testo").html(sorgente.substring(0,caratteri_massimi) + '[...]');
$(".leggi").click(
function(){
//visualizzo tutto
$("#testo").html(sorgente);
//previene il fadein di tanti trigger
if ($(".indietro").is(":visible") ) {} else {
$(".indietro").fadeIn();}
});//fine leggi
$(".indietro").click(
function(){
//ritorna alla versione compressa
$("#testo").html(sorgente.substring(0,caratteri_massimi) + '[...]');
});//fine indietro
Come vedete il funzionamento è relativamente semplice, come sempre vi invito a leggere i commenti per capire appieno lo script. Per prima cosa elimino allo start della pagina il trigger di chiusura “indietro” (nota: avrei potuto farlo anche con i css usando display:none).
Dopo avere creato le variabili caratteri massimi, e sorgente (che non è altro il contenuto del div testo), passo a comprimere il testo del div usando la funzione substring e aggiungendo […] in fondo al testo per far capire al visitatore che il testo è stato accorciato. Usando questo codice all’apertura della pagina il testo viene troncato automaticamente.
Ora che ho, di fatto reso il testo tagliato all’apertura predispongo i due trigger per aprire/chiudere il testo.
Cliccando su “leggi” riempo il div #testo con la versione “estesa” del testo ovvero la variabile sorgente recuperata in precedenza.
Cliccando su “indietro” invece faccio apparire la versione limitata del testo,div o paragrafo. Il ciclo if serve a non far comparire ad ogni click un trigger “indietro”. Esso infatti verifica l’esistenza del trigger e agisce di conseguenza.
Conclusioni e Download
Questa soluzione, come detto all’apertura dell’articolo è ideale per tutti coloro che non possono (o non vogliono) ricorerre a PHP per troncare o tagliare del testo. Spero vi sia utile per i vostri progetti!
[button link=”http://www.targetweb.it/tutorial/2012/scroll-text/index.html” color=”blue” target=”blank” size=”large” ]Demo[/button]
[button link=”http://www.arosistemi.it/” color=”blue” target=”blank” ]Guardalo Su WordPress[/button]
[viral-download file1=”http://www.targetweb.it/download/2012/scroll-text-targetweb.zip” name1=”Scarica lo script!” url=”http://www.targetweb.it/jquery-troncare-il-testo-di-un-div-o-paragrafo/” message=”Per scaricare il file completo devi condividere l’articolo su un social network. ” tweet=”#jQuery – Troncare il testo di un div o paragrafo” thankyou=”Grazie per aver condiviso, clicca sul link qui sotto:”/]
Se ti è piaciuto l’articolo condividi e commenta!
