<div class="container">
  <p>Using line clamps provides more flexibility with text overflow but isn't based on the container height</p>
</div>

.container {
  border: 1px solid rgb(19 78 74 / 0.5);
  flex: none;
  padding: 0.25rem;
  width: 8rem;
}

p {
  color: rgb(55 65 81 / 0.8);
  font-size: 0.75rem;
  margin: 0;
  overflow: hidden;
  width: 100%;

  /* line clamp specific requirements */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}