Multy-line Ellipses Overflow

A solution to clip text in CSS which spans over several lines, and use an ellipses.

by veer_vin

HTML

<div class="text ellipsis">
  <span class="text-concat">
Lorem ipsum dolor sit amet.
  </span>
</div>

CSS

.text {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
}

.text-concat {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 2.4em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align:justify;
  text-overflow: ellipsis;
}

.text.ellipsis::after {
  content: "...";
  position: absolute;
  right: -12px; 
  bottom: 5px;
}

/* Right and bottom for the psudo class are px based on various factors, font-size etc... Tweak for your own needs. */