◆ line-clamp
◆ -webkit プレフィックスつけるけど Firefox でも動く

そろそろ Edge も Chromium 版だし複数行の ... はこれで良さそうです

<!doctype html>

<style>
div {
margin: 10px;
background: #cfa;
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
</style>

<div id="div"></div>

<script>
div.innerHTML = "a ".repeat(100)
</script>

-webkit ついてるけど Firefox も対応してます

注意点に padding つけると隠れてるはずの部分が見えてしまうというのがあります
あくまで ... をつけて height を調整してくれるだけで それ以降を非表示にはしません
overflow: hidden でも div の内側の padding 領域は見えるのでそこに ... の次の行が見えます

<!doctype html>

<style>
div {
margin: 10px;
background: #cfa;
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
padding: 1em;
}
</style>

<div id="div"></div>

<script>
div.innerHTML = "a ".repeat(100)
</script>

padding をつけたいなら padding をつけた要素の内側に padding なし要素を作ってそれに line-clamp の設定すると良いです