JSFiddle - React, Tailwind, and code Playground

by maciejgurban

HTML

<h3>
Ellipsis after two lines of text. Defaults for regular single-line ellipsis
</h3>
<div>
 Lorem ipsum foo dolor sit amet bla bla blaa
</div>

CSS

div {
  width: 120px;
  height: 40px;
  line-height: 20px;
  
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

}

@supports (-webkit-line-clamp: 2) {
   div {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: initial;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
  }
}