CSS и JavaScript: Как создать поддерево DOM, ограниченное визуализированной высотой или длиной innerText?
У меня статически сгенерированный сайт. Инструмент, который я использую, не поддерживает ведущие абзацы, и даже если бы он это сделал, я не хотел бы просматривать все мои существующие страницы разметки и разграничивать ведущий раздел.
Поэтому я получаю длинные посты, расположенные друг под другом.
Я хотел бы создать ведущий раздел автоматически, основываясь на содержании.
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смотрите здесь, так что я посмотрю на это.
Это может быть удобно: как получить размер компонента (высоту / ширину) перед рендерингом?