1

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?

Ondra Žižka
  • 43,948
  • 41
  • 217
  • 277
  • looks like it is usually done on server side and bits are digged & updated via JavaScript . Ajax is the keyword i believe – G-Cyrillus Jul 26 '18 at 18:54
  • Right, I could code it in the generating tool, but that's kind of what I want to avoid for now :) It is a project with probably slow release cycle. – Ondra Žižka Jul 26 '18 at 18:56
  • 1
    You can set `max-height` (corresponding to line height multiples) and if you know structure of your DOM (like max nest level), you can use `.collapsed > .post:nth-child(1n+50) { display: none; }` to show first 50 posts and possibly remove `.collapsed` on btn click to expand.. – bigless Jul 26 '18 at 19:08
  • if you provide a pseudo code so we easier can see how it looks, and on how you want it to look, we get a better chance to provide a good answer. – Asons Jul 27 '18 at 09:51
  • @LGSon, added, but I'm not sure if it's too useful here :) How it looks is the "ascii art" – Ondra Žižka Jul 27 '18 at 10:08
  • The markup structure is very important, as based on how it looks there might be a CSS solution. FYI, CSS can't count lines of text, it can count elements, if that is useful, ...but w/o a proper [mcve] all we can do I guess based on how we _think_ you mean – Asons Jul 27 '18 at 10:20
  • That :nth-line thing is just a wish list post. It doesn't suggest that such a feature exists, it's saying "I wish this existed". The author really needs to highlight the paragraph that says "Please note that most of the code below is not valid. It's example code. Like 'wouldn't it be cool if' code." rather than just making it a part of the rest of the text and easy to gloss over. – BoltClock Jul 27 '18 at 12:13

0 Answers0