JSFiddle - React, Tailwind, and code Playground

HTML

<div class="truncate">
  No truncating at all, height adjusts to text: abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk 
</div>
<div class="truncate ellipsis">
  Truncating at 50px height: abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk 
</div>
<div class="truncate ellipsis chrome">
  Truncating at 50px height: abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk abcdefghijk 
</div>

CSS

.truncate {
  border-width:1px;border-style:solid;border-color:#aaaaaa;
  padding:10px;margin-bottom:10px;
  width:260px;
  overflow:hidden;
  display:block;
  box-sizing: border-box;-moz-box-sizing: border-box;
}
.truncate.ellipsis {
  height:50px;
  text-overflow:ellipsis;
}
.truncate.ellipsis.chrome {
  display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;
}