Set the number of lines, and the overflowing part is hidden with ”…” added. Since no characters are removed, the full text stays in the HTML.

.excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Multi-line truncation only worked in some browsers, so JavaScript trimmed one character at a time and added ”…” once the text fit in three lines. Every time the viewport width changed, it also had to restore the original text and start over.

.excerpt {
  line-height: 1.5;
  max-height: 4.5em;
  overflow: hidden;
}

for (const excerpt of document.querySelectorAll('.excerpt')) {
  const text = excerpt.textContent
  const clamp = () => {
    excerpt.textContent = text
    let end = text.length
    while (excerpt.scrollHeight > excerpt.clientHeight && end > 0) {
      end--
      excerpt.textContent = text.slice(0, end) + '…'
    }
  }
  clamp()
  window.addEventListener('resize', clamp)
}