CSS and JavaScript: How to create a DOM subtree limited by rendered height or length of innerText?

Question

I have a statically generated website. The tool I use doesn't support lead paragraphs, and even if it did, I wouldn't want to go through all my existing markup pages and demarcate the lead section.

So I end up with long posts stacked below each other.

I would like to create the leading section automatically, based on the content.

Logo
----------------
Post1 Title
Lorem ipsum...
----------------
Post1 Title
Lorem ipsum...
----------------
...

I am looking for something like:

trimTheInnerHtmlToMatchLimits(postElement, {maxHeight: "200px"});

So far, I have tried CSS approach:

/** Only show "lead paragraph" (first few elements) in the index page? */
.document-list .document .doc-body * ~ * ~ * ~ * ~ * ~ * ~ * ~ * {
    display: none;
}

However, this is kind of blind - the elements sometimes contain very long text, e.g. hundreds of lines of some log. And if I reduce the number of *s, then sometimes the posts get too short - e.g. if the beginning is a list.

I could simply cut the post at some height using CSS. But the issue is that the DOM stays very large, and slower devices have issues rendering it.

Ideally I would like to reduce the DOM of the post so that it contains certain length of text, or ideally, renders up to some height.

Regarding reducing the DOM: Is there some usable recursive functionality in CSS? Otherwise it involves recursing into the DOM, adding the elements and watching the innerText grow.

Regarding watching the height grow: The way I know would remove display: none from the elements, render it on each step, and stop when height would get to some threshold. That's even worse performance. Is there some way to render just "virtually" (in the background) and render to the display when computed?

Or if there is any better approach to this, I welcome any suggestion. Thanks!

Edit: I have found about the :nth-line, see here so I'll have a look at that.

This could be handy: How to get a component's size (height/width) before render?