JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="block-with-text">
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
</div>
<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry gfgf df df sdg hghghfg f fh fh fghghfgh fh fgh ggggggh fg ghfgh fhfgh fgh fh fgh dfhfghfgh fg f fh f fg
</div>
<div class="block-with-text">
Lorem Ipsum is simply
</div>
</div>
CSS
.container{
width: 200px;
}
.block-with-text {
overflow: hidden;
position: relative;
max-height: 32px;
text-align: justify;
margin-right: -10px;
padding-right: 10px;
}
.block-with-text+.block-with-text{
margin-top:10px;
}
.block-with-text:before {
content: '...';
position: absolute;
right: 0;
bottom: 0;
}
.block-with-text:after {
content: '';
position: absolute;
right: 0;
width: 10px;
height: 10px;
margin-top: 10px;
background: white;
}