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

juillet 2, 2019février 10, 2020 Amine KOUIS Aucun commentaire

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.

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.