<div>
<strong>ORIGINAL TEXT: </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie turpis quis erat eleifend, a accumsan lacus viverra. Phasellus efficitur suscipit iaculis. In nec risus tellus. Mauris laoreet suscipit risus non imperdiet. Vestibulum in dolor nulla. Sed ante eros, luctus eget suscipit nec, gravida ac turpis. Nam ac lacus rhoncus, suscipit risus sit amet, suscipit mi. Praesent eget sapien eget purus dictum condimentum. Sed eget ipsum id tortor aliquam efficitur non ut magna. Nullam ultricies porta urna, a tempor nunc ullamcorper ac. Aenean facilisis felis a dui convallis luctus.Vestibulum at metus imperdiet, commodo lorem vitae, tempor urna. Donec leo justo, malesuada nec ipsum ut, facilisis consectetur arcu. In hac habitasse platea dictumst. Cras pharetra libero ut sapien volutpat tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis rhoncus quis purus non egestas. Mauris nec leo et mauris maximus auctor venenatis nec mi.
</div>
<div class="twoLinesTruncate">
<strong>2 Lines Truncate: </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie turpis quis erat eleifend, a accumsan lacus viverra. Phasellus efficitur suscipit iaculis. In nec risus tellus. Mauris laoreet suscipit risus non imperdiet. Vestibulum in dolor nulla. Sed ante eros, luctus eget suscipit nec, gravida ac turpis. Nam ac lacus rhoncus, suscipit risus sit amet, suscipit mi. Praesent eget sapien eget purus dictum condimentum. Sed eget ipsum id tortor aliquam efficitur non ut magna. Nullam ultricies porta urna, a tempor nunc ullamcorper ac. Aenean facilisis felis a dui convallis luctus.Vestibulum at metus imperdiet, commodo lorem vitae, tempor urna. Donec leo justo, malesuada nec ipsum ut, facilisis consectetur arcu. In hac habitasse platea dictumst. Cras pharetra libero ut sapien volutpat tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis rhoncus quis purus non egestas. Mauris nec leo et mauris maximus auctor venenatis nec mi.
</div>
<div class="threeLinesTruncate">
<strong>3 Lines Truncate: </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie turpis quis erat eleifend, a accumsan lacus viverra. Phasellus efficitur suscipit iaculis. In nec risus tellus. Mauris laoreet suscipit risus non imperdiet. Vestibulum in dolor nulla. Sed ante eros, luctus eget suscipit nec, gravida ac turpis. Nam ac lacus rhoncus, suscipit risus sit amet, suscipit mi. Praesent eget sapien eget purus dictum condimentum. Sed eget ipsum id tortor aliquam efficitur non ut magna. Nullam ultricies porta urna, a tempor nunc ullamcorper ac. Aenean facilisis felis a dui convallis luctus.Vestibulum at metus imperdiet, commodo lorem vitae, tempor urna. Donec leo justo, malesuada nec ipsum ut, facilisis consectetur arcu. In hac habitasse platea dictumst. Cras pharetra libero ut sapien volutpat tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis rhoncus quis purus non egestas. Mauris nec leo et mauris maximus auctor venenatis nec mi.
</div>
div {font-family: sans-serif; font-size: 1.3rem; width: 90%; margin: 2rem auto;}
.twoLinesTruncate {
overflow:hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.threeLinesTruncate {
overflow:hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.