How to set `text-overflow: ellipsis` only after the third line? [duplicate] - html

Question

This question already has answers here:
Limit text length to n lines using CSS
(17 answers)
Closed 4 years ago.
How to set text-overflow: ellipsis only after the third line?
I want to show "..." at the end of the long text, but only after 3 lines.

Answer 1

You can use before selector to add ellipsis after the third line. An example below:
.ellipsis {
overflow: hidden;
position: relative;
line-height: 1.2em; /* one line's height */
max-height: 3.6em; /* max three lines */
/* And some optional styles for example snippet */
text-align: justify;
margin: auto;
width: 75vw;
background-color: lightblue;
border: solid 2px black /* for reference */
}
.ellipsis:before {
content: '...';
position: absolute;
right: 0;
bottom: 0;
background-color: lightblue; /* same as .ellipsis's background-color */
padding-left: 5px;
pointer-events: none
}
<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum urna sit amet tellus lacinia, et pulvinar turpis commodo. Fusce vel quam non tortor finibus cursus a nec enim. Proin sollicitudin ex mauris, eu mattis leo tempor nec. Aenean ornare tincidunt cursus. Aliquam ante lorem, pretium nec tempus at, tempus vitae ex. Sed consectetur leo mollis enim pharetra consequat. Ut ac aliquam elit. Pellentesque porta, lacus in congue interdum, urna orci hendrerit purus, eget vestibulum tortor ex sed mi. Sed vel elementum mi. Etiam viverra ut dolor sit amet vehicula. Duis aliquet urna eget leo suscipit, ac ullamcorper metus mollis. Curabitur ac elit et sem pretium posuere a sodales sem. Morbi rutrum ipsum eu luctus molestie. Suspendisse sed elit nunc. Quisque pulvinar, purus at dignissim imperdiet, nulla mi sollicitudin dolor, at faucibus mauris urna in libero. In nibh nisi, mollis eget justo a, malesuada euismod lectus. Fusce mauris massa, volutpat et hendrerit at, dapibus a ex. Sed mattis malesuada odio. Aenean gravida est quis lorem interdum egestas. Curabitur pulvinar eros sed vehicula ultrices. Fusce mollis pharetra luctus. Phasellus maximus vulputate turpis. Sed finibus enim et velit lacinia, at commodo turpis gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent ex magna, ultrices vitae dapibus egestas, vestibulum id leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin eget nisl luctus, fringilla mi ac, imperdiet dui. Fusce vel accumsan metus. Nulla et imperdiet arcu, sit amet placerat mi. Nunc vehicula quam sed finibus mattis. Ut suscipit justo at sollicitudin molestie. Phasellus consectetur convallis quam et malesuada. Donec consectetur sagittis turpis, facilisis vehicula neque luctus sed. Praesent vulputate porttitor interdum. Cras lobortis sit amet turpis ut fermentum. Cras diam orci, posuere nec ultricies sollicitudin, semper at augue. Donec mattis elit vitae ligula posuere aliquam. Cras gravida at metus ac viverra. Sed tempor urna aliquet ex ullamcorper, bibendum porttitor nisl iaculis. Integer tellus lacus, vehicula vel nunc ac, rutrum sodales sem. Maecenas pretium eleifend efficitur. Praesent auctor consectetur turpis a ullamcorper. Duis mattis nibh sed quam volutpat fringilla. Ut eu nulla ut nisi egestas ultrices. Proin elementum non risus non maximus.</p>