Clamping is the king. Ellipsis gaming

clamp.css

.clamp {
  overflow: hidden;
}
.clamp.is-active {
  position: relative;
  height: 7em;
}
.clamp.is-active:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
@supports (-webkit-line-clamp: 4) {
  .clamp.is-active{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    max-height: 7em;
    height: auto;
  }
  .clamp.is-active:after {
    display: none;
  }
}

clamp.js

$(document).on('click','.read-more', function(e) {
  e.stopPropagation();
  e.preventDefault();
  $(this).parent().find('.clamp').toggleClass('is-active');
});

sample.html

<div class="clamp is-active">
  <p>...</p>
  <p>...</p>
</div>

<p class="clamp is-active">...</p>