1

我有一个静态生成的网站。我使用的工具不支持引导段落，即使支持，我也不想浏览所有现有的标记页面并划分引导部分。

因此，我最终将长帖子堆叠在彼此下方。

我想根据内容自动创建前导部分。

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

我正在寻找类似的东西：

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

到目前为止，我已经尝试过 CSS 方法：

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

然而，这有点盲目——元素有时包含很长的文本，例如数百行的一些日志。如果我减少*s 的数量，那么有时帖子会变得太短 - 例如，如果开头是一个列表。

我可以简单地使用 CSS 将帖子剪切到某个高度。但问题是 DOM 仍然很大，而较慢的设备在渲染它时会遇到问题。

理想情况下，我想减少帖子的 DOM，使其包含一定长度的文本，或者理想情况下，渲染到一定高度。

关于减少 DOM：CSS 中是否有一些可用的递归功能？否则，它涉及到递归到 DOM、添加元素并观察innerText增长。

关于观察高度增长：我知道的方式会从元素中删除，在每一步渲染它，并在达到某个阈值display: none时停止。height那是更糟糕的表现。有什么方法可以“虚拟”渲染（在后台）并在计算时渲染到显示器？

或者，如果有任何更好的方法，我欢迎任何建议。谢谢！

编辑：我找到了关于:nth-line，请看这里，所以我会看看。

这可能很方便：如何在渲染之前获取组件的大小（高度/宽度）？

4

0 回答 0