HTML CSS JS

<button>Show more</button>
<pre class="truncated">  Nature’s first green is gold,
  Her hardest hue to hold.
  Her early leaf’s a flower;
  But only so an hour.
  Then leaf subsides to leaf.
  So Eden sank to grief,
  So dawn goes down to day.
  Nothing gold can stay.
</pre>

<div class="unsupported">
  The transition does not work in your browser! 🙁 This is because the
  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size" target="_blank"><code>interpolate-size</code></a>
  property is not supported.
</div>

:root {
    interpolate-size: allow-keywords;
  }

  /* Initial state limits content to 3 lines */
  .truncated {
    height: 3lh;
    width: 300px;
    overflow: hidden;

    transition: height 0.5s ease-in-out;
  }

  /* Open state shows entire content */
  .open {
    height: auto;
  }

  /* GENERAL STYLES */

  pre {
    padding: 0 0.5rem;
    border: 1px solid grey;
    border-radius: 0.5rem;

    line-height: 1.5;
  }

  body {
    display: grid;
    place-items: center;
    gap: 1rem;

    background-color: white;

    font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif;
  }

  /* Provide a warning if interpolate-size is not suppored in the browser */
  .unsupported {
    grid-row: 1;

    color: red;
    background-color: hsl(0, 100%, 90%);
    border: 1px red solid;
    font-size: 0.8rem;

    margin: 0.25rem;
    padding: 0.2rem;
    max-width: 600px;

    a:visited {
      color: blue;
    }
  }

  @supports (interpolate-size: allow-keywords) {
    .unsupported {
      display: none;
    }

    body {
      grid-template-rows: 1fr;
    }
  }

// merely toggles the "open" class on the truncated section

  let button = document.querySelector("button");
  let section = document.querySelector("pre");

  button.addEventListener("click", () => section.classList.toggle("open"));