Comment afficher la suite du texte s’il dépasse une certaine longueur avec jQuery

Vous pouvez utiliser la méthode substring() de JavaScript en combinaison avec les méthodes append() et html() de jQuery pour ajouter un lien en savoir plus à la fin des paragraphes si le nombre de caractères à l’intérieur d’un paragraphe dépasse une certaine longueur.
 
 
L’exemple suivant coupe simplement le paragraphe et ajoute un lien à la fin. Vous pouvez afficher le contenu coupé en cliquant sur le lien « lire plus … ».
 

Code HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Afficher la suite du texte.</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
		// Mettez le code jQuery ici.
    </script>
    <style>
		/* Mettez le code css ici. */
    </style>
  </head>
  <body>    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>In dictum, quam eget tristique facilisis, augue magna tempor sapien.</p>
    <p class="readMore">Mauris dictum mi dictum, consectetur nibh sed, vulputate risus. Sed mattis, nisi et sodales gravida, nunc magna feugiat massa, non maximus quam felis quis massa. Aenean non massa massa. Donec ac justo non massa facilisis porta. Aliquam ligula sem, fringilla eget sagittis sit amet, venenatis non felis. In lobortis vel turpis sit amet vestibulum. Curabitur vulputate sapien sed dignissim tempor. Sed eget libero urna. Donec non lectus sed risus ultrices maximus, non ultricies lacus mi ut lorem.</p>
  </body>
</html>

 

Code jQuery:
$(document).ready(function() {
    var max = 200;
    $(".readMore").each(function() {
        var str = $(this).text();
        if ($.trim(str).length > max) {
            var subStr = str.substring(0, max);
            var hiddenStr = str.substring(max, $.trim(str).length);
            $(this).empty().html(subStr);
            $(this).append(' lire plus');
            $(this).append('' + hiddenStr + '');
        }
    });
    $(".lire-plus").click(function() {
        $(this).siblings(".addText").contents().unwrap();
        $(this).remove();
    });
});

 
 

Code CSS:
.readMore .addText {
    display: none;
}
Résultat

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

In dictum, quam eget tristique facilisis, augue magna tempor sapien.

Mauris dictum mi dictum, consectetur nibh sed, vulputate risus. Sed mattis, nisi et sodales gravida, nunc magna feugiat massa, non maximus quam felis quis massa. Aenean non massa massa. Donec ac justo non massa facilisis porta. Aliquam ligula sem, fringilla eget sagittis sit amet, venenatis non felis. In lobortis vel turpis sit amet vestibulum. Curabitur vulputate sapien sed dignissim tempor. Sed eget libero urna. Donec non lectus sed risus ultrices maximus, non ultricies lacus mi ut lorem.

QCM jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus
Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *