How to add cross-browser multi-line text overflow with ellipsis appended with CSS?

First we use the -webkit-line-clamp property, to add cross-browser multi-line text overflow with ellipsis appended with CSS.

For instance, we write

<div>
  This is a multi-lines text block, while some lines inside the div and some
  outside the div
</div>

to add a div with text.

Then we write

div {
  width: 205px;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

To hide everything after 2lines, to add -webkit-line-clamp: 2; with the width and height .