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

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

For instance, we write

<div>
  This is a multi-lines text block, some lines inside the div, while some
  outside
</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 add -webkit-line-clamp: 2; with the width and height to hide everything after 2 lines.