Show read more link if the text exceeds a certain length with jQuery
In this tutorial, we are going to see how to show read more link if the text exceeds a certain length with jQuery. You can use JavaScript’s substring() method in combination with jQuery’s append() and html() methods to add a read more link at the end of paragraphs if the number of characters inside a paragraph exceeds a certain length.
The following example simply breaks the paragraph and adds a link at the end. You can view the cut content by clicking on the “read more…” link.
HTML Code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Show read more link if the text exceeds a certain length</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> // Put the jQuery code Here </script> <style> /* Put the CSS Style Here */ </style> </head> <body> <p>Lorem ipsum dolor sociosqu ad litora torquent per conubia nostra.</p> <p>Aenean rhoncus consequat magna id commodo.</p> <p class="readMore">Class dolor ut sociosqu ad litora venenatis per conubia mollis, per consectetur vestibulum. Maecenas fermentum magna et leo eleifend bibendum. Nullam vitae aliquet nisi. In eu nibh sollicitudin, efficitur ligula lobortis, pharetra tellus. In ac blandit mauris. Aenean rhoncus consequat magna id commodo. Morbi quis eros rutrum libero scelerisque ullamcorper quis varius arcu. Nam vestibulum venenatis mollis. Proin consectetur metus et tortor interdum, eu eleifend mauris condimentum. Nunc varius tortor dolor, id pellentesque libero eleifend ut. </p> </body> </html>
jQuery Code:
$(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(' Read more…'); $(this).append('' + hiddenStr + ''); } }); $(".link").click(function() { $(this).siblings(".addText").contents().unwrap(); $(this).remove(); }); });
CSS Code:
.readMore .addText { display: none; }
Result |
---|
Lorem ipsum dolor sociosqu ad litora torquent per conubia nostra. Aenean rhoncus consequat magna id commodo. Class dolor ut sociosqu ad litora venenatis per conubia mollis, per consectetur vestibulum. Maecenas fermentum magna et leo eleifend bibendum. Nullam vitae aliquet nisi. In eu nibh sollicitudin, efficitur ligula lobortis, pharetra tellus. In ac blandit mauris. Aenean rhoncus consequat magna id commodo. Morbi quis eros rutrum libero scelerisque ullamcorper quis varius arcu. Nam vestibulum venenatis mollis. Proin consectetur metus et tortor interdum, eu eleifend mauris condimentum. Nunc varius tortor dolor, id pellentesque libero eleifend ut. |
This was really useful! Thank you so much.
What a great snippet and works great! One question, it seems this is stripping out the HTML elements within the text. Primarily, I’m applying this to a div that contains tags but it’s stripping out all tag elements within the div.
Thoughts?