JSFiddle - React, Tailwind, and code Playground

HTML

<div class="uzun-yazi">
  <a href="#">devamı</a>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan lacinia tortor, vitae lobortis elit pretium vitae. Nullam gravida tincidunt accumsan. Donec et nulla egestas, vehicula arcu quis, dapibus erat. Ut commodo interdum tortor, id tempus justo consectetur maximus. Phasellus id dui non mi vulputate feugiat. Nullam ac sapien vulputate, rhoncus felis ac, gravida sapien. Vivamus non vehicula lorem, ut dapibus mauris. Suspendisse ac nulla imperdiet, imperdiet risus sit amet, consequat nisi. Fusce arcu metus, consequat eu eleifend at, lacinia id dolor. Aliquam sem dui, efficitur non tempus a, sagittis vel leo. Nam sodales erat nec nulla interdum, ut fringilla elit semper. Praesent vel molestie tortor, a viverra libero. Donec eu ornare erat, placerat porttitor risus.
  </p>
  
</div>

<div class="uzun-yazi">
  <a href="#">devamı</a>
  <p>
    Proin ut cursus velit. Donec sit amet lectus convallis, volutpat arcu a, pellentesque justo. Nunc rutrum urna et arcu consequat, gravida sollicitudin augue pretium. Aliquam erat volutpat. Cras condimentum semper viverra. Proin aliquam, augue at pharetra euismod, odio urna pharetra metus, in lacinia ante dolor eget lorem. Donec eleifend enim vitae tincidunt euismod. Ut quis blandit felis. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum nibh libero, malesuada non imperdiet et, mollis in lorem. Phasellus facilisis leo eu posuere eleifend.
  </p>
  
</div>

CSS

.uzun-yazi p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

}

.uzun-yazi a {
  font-style: italic;
  float: right;
  border-bottom: 1px dotted #000;
  cursor: pointer;
  text-decoration: none;
  color: black;
}

.uzun-yazi a:focus~p {
  -webkit-line-clamp: inherit;
}