A version of implementing a "Read more" button in collection descriptions using line-clamp.

readmore-truncate-2.liquid

<!-- HTML -->
<div class="collection-description short">
  {{ collection.description }}
</div>
<a id="description-toggle" class="read-more">Read more</a>

<!-- CSS -->
<style>
  .collection-description.short {
    display: box;
    line-clamp: 1;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* add button style (optional) */
</style>

<!-- JS -->
<script>
  document.getElementById('description-toggle').addEventListener('click', function(evt) {
      if(evt.currentTarget.classList.contains('read-more')) {
          evt.currentTarget.classList.remove('read-more');
          evt.currentTarget.classList.add('show-less');
          evt.currentTarget.innerHTML = "Show less";
          document.querySelector('.collection-description').classList.remove('short');
      } else {
          evt.currentTarget.classList.remove('show-less');
          evt.currentTarget.classList.add('read-more');
          evt.currentTarget.innerHTML = "Read more";
          document.querySelector('.collection-description').classList.add('short');
      }
  });
</script>