css ellipsis on fourth line with read more with css [duplicate] - html

Question

This question already has answers here:
Applying an ellipsis to multiline text [duplicate]
(23 answers)
Closed 4 years ago.
Guys, I want ellipsis and read more tag after fourth or third line when user click on read more than more content show for this with CSS.
what I want is like this:
<div class="mycontent">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also this is aweome</p>
</div>
I want to show first two few words only then after I want to read more tag where user click and pending content show. like this follow:-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy... read more
now after click read more all content show like this:-
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but
also this is awesome

Answer 1

You need to truncate text after two lines. There could be two ways to do it pure css.
Only for Chrome
p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
For all browsers
p {
overflow: hidden;
position: relative;
line-height: 1rem;
max-height: 2rem;
text-align: justify;
margin-right: -1rem;
padding-right: 1rem;
}
/* create the ... */
p:before {
content: '...';
position: absolute;
right: 0;
bottom: 0;
}
p:after {
content: '';
position: absolute;
right: 0;
width: 1rem;
height: 1rem;
margin-top: 0.2rem;
background: white;
}
additionally, you could use js to do it.

Answer 2

my html code is like this..
<div class="content">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic </p>
</div>
and the web.css should be like this
.content {
overflow: hidden;
text-overflow: ellipsis;
line-height: 18px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
display: -moz-box;
color: 8b8989;
font-size: 13px;
}
-webkit-line-clamp specifies from which line the elipsis need to be applied