◆ 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 の設定すると良いです