Home » Tutorials » JavaScript » Multiline Truncation With Ellipsis & Read More Button

Multiline Truncation With Ellipsis & Read More Button

Multiline Truncation With Ellipsis & Read More Button

With the help of JavaScript & CSS’s line-clamp property, we can detect if an HTML element has overflow content, truncate the text with ellipsis (…) & add a “Read more” button that expand the text when clicked.

In this article, we will show you how to detect the length of the content, truncate content accordingly to your need, and add a Read More button to expand the content when clicked.

View Demo: Detect Overflow Content & Add Read More Button

Prerequisites

We expect that you are familiar with the following:

  • HTML5 and CSS3 (Basic level)
  • JavaScript (Basic level)

Expected Learnings

Your key learnings from this project will be:

  • How to detect and know is the content overflow in a DIV
  • How to truncate a content and add a Read More button if the content is overflow

Overview of Code

<!DOCTYPE>
<html>
<head>
	<style>
		body {
			width: 320px;
		}

		#content {
		    display: -webkit-box;
		    -webkit-box-orient: vertical;
		    -webkit-line-clamp: 3;
		    overflow: hidden;
		    width: 320px;
		}

		#content.reveal-all {
			display: block;
		}

		#btn-expand-container {
			margin-top: 12px;
			text-align: right;
		}

		#btn-expand-container button {
			cursor: pointer;
		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script>
		$(document).ready(function() {
			function detectIsOverflow(element) {
				return element.scrollHeight > element.clientHeight
			}

			function enableReadMoreButton(condition, element) {
				if(condition == true) {
					element.show();
				} else {
					element.hide();
				}
			}

			function toggleReadCloseText(parent, element_readmore, element_close) {
				if(element_readmore.is(":visible")) {
					parent.addClass('reveal-all');
					element_readmore.hide();
					element_close.show();
				} else {
					parent.removeClass('reveal-all');
					element_readmore.show();
					element_close.hide();
				}
			}

			var is_content_overflow = detectIsOverflow($('#content')[0]);

			enableReadMoreButton(is_content_overflow, $('#btn-expand-container'));

			$('#btn-expand-container button').on('click', function() {
				toggleReadCloseText($('#content'), $('.txt-readmore'), $('.txt-readless'));
			});
			
		});
	</script>
</head>
<body>
	<div id="content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper nisi sed interdum sollicitudin. Sed ac elit vitae lacus scelerisque cursus. Donec vehicula diam vel magna vestibulum, nec porttitor lacus ullamcorper. Suspendisse vehicula sapien sit amet eros vehicula accumsan. Vivamus lobortis, sem sit amet consectetur fermentum, quam erat hendrerit nunc, ut vestibulum lectus arcu cursus nisi. Donec blandit neque sed tristique rutrum. Cras vel mi eleifend purus fermentum mattis. Nulla fermentum erat at mauris congue, eu aliquet mi scelerisque. Duis in faucibus quam. Praesent facilisis vitae nulla in suscipit. Praesent porta sapien cursus odio rhoncus commodo. Maecenas ac magna vel velit finibus sagittis sed nec tortor.
	</div>
	<div id="btn-expand-container">
		<button class="txt-readmore">Read More</button>
		<button class="txt-readless" style="display: none;">Close</button>
	</div>
</body>
</html>

Step 1: Setup the HTML structure

<!DOCTYPE>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div id="content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper nisi sed interdum sollicitudin. Sed ac elit vitae lacus scelerisque cursus. Donec vehicula diam vel magna vestibulum, nec porttitor lacus ullamcorper. Suspendisse vehicula sapien sit amet eros vehicula accumsan. Vivamus lobortis, sem sit amet consectetur fermentum, quam erat hendrerit nunc, ut vestibulum lectus arcu cursus nisi. Donec blandit neque sed tristique rutrum. Cras vel mi eleifend purus fermentum mattis. Nulla fermentum erat at mauris congue, eu aliquet mi scelerisque. Duis in faucibus quam. Praesent facilisis vitae nulla in suscipit. Praesent porta sapien cursus odio rhoncus commodo. Maecenas ac magna vel velit finibus sagittis sed nec tortor.
	</div>
	<div id="btn-expand-container">
		<span class="txt-readmore">Read More</span>
		<span class="txt-readless" style="display: none;">Close</span>
	</div>
</body>
</html>
  • Load jQuery library into the page.
  • Set 2 DIV, one for content, another one act as a container for Read more / Close button

Step 2: Set the CSS styles

<style>
	body {
		width: 320px;
	}

	#content {
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 3;
	    overflow: hidden;
	}

	#content.reveal-all {
	    display: block;
	}

	#btn-expand-container {
		margin-top: 12px;
		text-align: right;
	}

	#btn-expand-container button {
		cursor: pointer;
	}
</style>

We could ignore the styles for body and #btn-expand-container, as the styles that we defined for both elements are just for demonstration purpose.

We just need to take note on these 2 classes: #content, #content.reveal-all

  • For #content class, we’ve set it to only display maximum 3 lines of content using -webkit-line-clamp property. If the content is overflowing, an ellipsis will be shown at the point where the content is clamped. To learn more line-clamp, please read Truncate Multiple Line With CSS
  • For #content.reveal-all class, we’ve set the display property value to block, to instruct browser to forget about -webkit-line-clamp property.

Step 3: Detect is content overflow

$(document).ready(function() {
	function detectIsOverflow(element) {
		return element.scrollHeight > element.clientHeight
	}

	var is_content_overflow = detectIsOverflow($('#content')[0]);
});

Create a function called detectIsOverflow(element) to detect is the content in the #content DIV overflow. It will return a Boolean: true if the content is overflowing, and false if it is not.

Step 4: Show / Hide Read More button

$(document).ready(function() {
	function detectIsOverflow(element) {
		return element.scrollHeight > element.clientHeight
	}

	function enableReadMoreButton(condition, element) {
		if(condition == true) {
			element.show();
		} else {
			element.hide();
		}
	}

	var is_content_overflow = detectIsOverflow($('#content')[0]);

	enableReadMoreButton(is_content_overflow, $('#btn-expand-container'));
});

Create a function called enableReadMoreButton(condition, element). This function receives 2 arguments: condition and element. We use these 2 arguments to toggle the visibility of the Read more button:

  • We passed in the variable: is_content_overflow as a argument of condition into the enableReadMoreButton() function, and $(‘#btn-expand-container’) as second argument.
  • If the first argument’s value is true, the element (the Read More button) will be displayed, else the element will be hidden.

Step 5: Set the interactivity of Read More button

$(document).ready(function() {
	function detectIsOverflow(element) {
		return element.scrollHeight > element.clientHeight
	}

	function enableReadMoreButton(condition, element) {
		if(condition == true) {
			element.show();
		} else {
			element.hide();
		}
	}

	function toggleReadCloseText(parent, element_readmore, element_close) {
		if(element_readmore.is(":visible")) {
			parent.addClass('reveal-all');
			element_readmore.hide();
			element_close.show();
		} else {
			parent.removeClass('reveal-all');
			element_readmore.show();
			element_close.hide();
		}
	}

	var is_content_overflow = detectIsOverflow($('#content')[0]);

	enableReadMoreButton(is_content_overflow, $('#btn-expand-container'));

	$('#btn-expand-container button').on('click', function() {
		toggleReadCloseText($('#content'), $('.txt-readmore'), $('.txt-readless'));
	});
});

Create a function called toggleReadCloseText(parent, element_readmore, element_close). This function receives 3 arguments:

  • parent: The content container #content
  • element_readmore: Read more button’s text element .txt-readmore
  • element_close: Close button’s text element .txt-readless

Then triggers toggleReadCloseText() function on every click event of Read More button.

And That’s It

Hope you learned something from this article!