Get started with Readmore.js CDN
MIT licensed
Readmore.js is a lightweight library that hide and reveal long content on web pages with a Read more link.
Tags:- css
- jquery
- readmore
- expand
- collapse
Stable version
Copied!
How to start using Readmore.js CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with Readmore.js CDN - cdnhub.io</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.cdnhub.io/Readmore.js/2.2.1/readmore.min.js"></script>
</head>
<body>
<div id="content">
<p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc quis bibendum rhoncus, elit quam bibendum odio, ut commodo nibh nisi eu nibh. Aliquam erat volutpat. Nam rhoncus augue quis urna. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices. Nullam id felis et ipsum bibendum ultrices.</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const readmore = new Readmore({
target: '#content p',
moreSelector: '.readmore-toggle',
lessSelector: '.readmore-hide',
maxHeight: 100,
collapsed: false
});
});
</script>
<style>
.truncate {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.readmore-toggle {
cursor: pointer;
}
</style>
</body>
</html>
Copied!
Copied!