限制两个div中的总最大行数

我知道如何使用单个 div 将省略号放在n行之后（在这种情况下，n 是 2 行）：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

它一对一工作，div但我有一个不同的问题。我有一些内容的标题和描述，我想将两个字段限制为最多 3 行，但总共也有 5 行（而不是最多可能的 6 行）。换句话说，如果标题是 3 行，我想在两行（带有省略号）之后删除描述。

我如何实现这一点（最好没有或最少使用 Javascript）？我现在只需要支持（移动）Safari。