<p>
  Multi-line overflow!
</p>

<p class="truncate-overflow">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. In sint facilis explicabo voluptatum exercitationem earum. Quibusdam vitae, iusto temporibus corrupti tempore distinctio soluta reiciendis. Ab aspernatur facilis autem temporibus veniam.
</p>

<p class="truncate-overflow">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</p>

<p class="truncate-overflow">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. S'mores are tasty treats for around campfires.
</p>
:root {
  /* Not my favorite that line-height has to be united, but needed */
  --lh: 1.4rem;
}

html {
  max-width: 22rem;
  margin: 2rem auto;
  line-height: var(--lh);
}

.truncate-overflow {
  --max-lines: 3;
  position: relative;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
  padding-right: 1rem; /* space for ellipsis */
}
.truncate-overflow::before {
  position: absolute;
  content: "...";
  /* tempting... but shows when lines == content */
  /* top: calc(var(--lh) * (var(--max-lines) - 1)); */
  
  /*
  inset-block-end: 0;
  inset-inline-end: 0;
  */
  bottom: 0;
  right: 0;
}
.truncate-overflow::after {
  content: "";
  position: absolute;
  /*
  inset-inline-end: 0;
  */
  right: 0;
  /* missing bottom on purpose*/
  width: 1rem;
  height: 1rem;
  background: white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.