How to create dynamic summary length from blog cards using Hugo/JavaScript

The two images shown below are taken from medium.com where it can be seen that in the blog post cards that depending upon the number of lines of the title text, the summary gets shortened, i.e. if title is 2 lines, summary is of two lines, else it is three lines long. I want to create this same effect using Hugo where for a given size of div/container (currently my container height which contains both title and summary is 8rem), the title should use the area it requires, and the rest of the container should be covered by summary ending with three dots (...).

Currently I am using

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

which truncates the summary but does not fit the whole length. Any solution using Hugo will be helpful If it cannot be done using hugo, but can be achieved using client side javascript, i.e. I send the whole summary and client side javascript adjusts the text, that will also be helpful. thanks in advance.

As a starting point for making this dynamic you can put <!--more--> in your markdown where you want the text to be split. Only text above <!--more--> will be shown in the summary.

Also in the config.toml there is a variable that controls the number of words shown in summary, default is 70 words. I use it with 50 like this:

summaryLength= 50

It does not directly answer your question but I hope it gives you some leads.