JSFiddle - React, Tailwind, and code Playground

by nottrobin

HTML

<div class="container">
  <p>
    Lorem ipsum dolor set amet. Lorem ipsum dolor set amet. Lorem ipsum dolor set amet. Lorem ipsum dolor set amet. Lorem ipsum dolor set amet. Lorem ipsum dolor set amet. Lorem ipsum dolor set amet.
    <a href="#" class="more">More...</a>
  </p>
</div>

CSS

.container {
    height: 80px;
    overflow: hidden;
}
.container p {
    position: relative;
    overflow: hidden;
    padding: 0;
    width: 200px;
    line-height: 20px;
}
.more {
    display: block;
    position: absolute;
    top: 60px;
    width: 100%;
    background-color: white;
    height: 20px;
    line-height: 20px;
}