JSFiddle - React, Tailwind, and code Playground

by Sergey Linnick

HTML

<p class="limit-text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum reprehenderit vel dolorem reiciendis repudiandae molestias veniam tempore atque. In rem amet blanditiis aliquam quae rerum, vel, nihil fugiat natus, provident recusandae. Ipsa molestias voluptate
  ducimus repellendus cupiditate, explicabo natus enim. Iure accusantium veniam veritatis, quis quia omnis a dicta, repellendus quam dolores voluptates assumenda, hic laboriosam, velit. Doloremque culpa magni, quis tempore cumque adipisci, nisi. Eos rerum
  id aspernatur neque hic aliquam quam maxime esse, saepe autem quas doloribus optio dolores libero ratione amet ad nihil natus ipsa sequi culpa unde labore aliquid voluptatem! Fuga quia molestiae deserunt, voluptate, impedit temporibus nesciunt quisquam.
  Praesentium nostrum voluptates, dolore suscipit tempore doloremque illum, sint dicta voluptatibus incidunt! Voluptatibus hic accusamus numquam inventore architecto optio. Ullam repudiandae quos aut fugiat tenetur aspernatur quod asperiores adipisci
  sint repellendus, error velit aperiam culpa soluta quisquam odio dolorum laboriosam ducimus voluptatibus voluptate perferendis, inventore cumque. Sit!
</p>

CSS

p {
  font-size:14px;
  line-height:1.6em;
  height: 4.8em;
  overflow:hidden;
}

p{
  position: relative;
  height: 3.6em; /* exactly three lines */
}
p:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  /* height: 3.6em; */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}