Css 在两个跨距之间截断跨距

我想做的是： 我有一个内容div在卡片下面，它应该包含标题的跨度、一个简短的描述跨度（必须被截断）和一个价格跨度。我希望content div最多有2行文本，并且只需要截断描述的范围

我的代码：

.card.card内容{
填充：16px 8px 8px 8px；
线高：正常；
}
.card.card内容span.card-title{
显示：块；
宽度：自动；
字号：1rem；
字号：500；
线高：正常；
边缘底部：0px；
}
.card.card内容span.card摘录{
显示：内联；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
字号：1rem；
线高：正常；
不透明度：0.75；
字体大小：300；
}
.卡片.卡片内容.卡片价格{
显示：块；
宽度：自动；
线高：正常；
字号：500；
}

这是一个很酷的产品
下面是截短的描述
xxx美元

这里有很多方法可以限制CSS和脚本的行，请参见：

毕竟，我决定使用以下脚本：