如何使用 Hugo/JavaScript 从博客卡片创建动态摘要长度

Question

下面显示的两张图片来自 medium.com，可以看到在博客明信片中，根据标题文本的行数，摘要会缩短，即如果标题为 2 行，则摘要为两行，否则是三行。我想使用 Hugo 创建相同的效果，对于给定大小的 div/container（目前我的包含标题和摘要的容器高度为 8rem），标题应该使用它需要的区域，容器的其余部分应该是由以三个点 (...) 结尾的摘要涵盖。

目前我正在使用

<div class="homepage-post-card-summary">
    {{ .Summary | truncate 100 }}
</div>

截断摘要但不适合整个长度。使用 Hugo 的任何解决方案都会有所帮助 如果无法使用 hugo 完成，但可以使用客户端 javascript 实现，即我发送整个摘要，客户端 javascript 调整文本，这也会有所帮助。提前致谢。