修剪标题和摘录组合的总字符值

Question

我想修剪帖子标题和摘录的组合添加字符值。

目前我可以独立完成这两项工作 - 通过主题设置的摘录和通过 JS 的帖子标题。

但是，标题长度变化很大，以至于每个帖子预览的高度变化很大，看起来很凌乱。

有没有办法在标题和摘录中添加总字符数，然后修剪 - 最终结果是标题较长的帖子显示的摘录部分较短，最多 100 个字符总作为起点。

标题的目标是：

.t-entry-title a

以及带有

的摘录

.t-entry-excerpt

在过去，我设法用它来修剪我的标题

$(".t-entry-title a").each (function () {
  if ($(this).text().length > 50)
    $(this).text($(this).text().substring(0,50) + '...');
});

但我不知道如何保留完整的标题长度，然后计算剩下的 100（总字符）减去标题，然后将剩余的字符分配给帖子摘录。

提前致谢。

编辑 -

我通常会修剪长标题，但在这种情况下，客户特别不希望修剪标题，不幸的是它们的长度差异很大。

他们不太担心摘录的修剪，因此希望仅在有可用字符时才显示。

有些标题很短 - 例如 2 个单词，因此需要摘录来平衡高度 - 无论是用作轮播还是用作网格时

Answer 1

如果您的 HTML 结构如下：

<div class="t-entry">
    <div class="t-entry-title">
        <a>This is a short title</a>
    </div>
    <div class="t-entry-excerpt">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
<div class="t-entry">
    <div class="t-entry-title">
        <a>This is a very very very very very very very very long title</a>
    </div>
    <div class="t-entry-excerpt">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

然后在javascript中你可以这样做：

//Max number of characters to be printed for each entry
const maxchar = 100;

//Iterates each entry
document.querySelectorAll(".t-entry").forEach(function(entry){
    var title = entry.querySelector(".t-entry-title>a");
    var excerpt = entry.querySelector(".t-entry-excerpt>p");
    var length = Math.min(title.innerText.length,maxchar);
    //Truncates title and excerpt text up to maxchar
    title.innerText = title.innerText.substring(0,maxchar);
    excerpt.innerText = excerpt.innerText.substring(0,maxchar-length);
});

Answer 2

是否有理由不使用 CSS 样式来修剪长字符串以适应其容器，而不是尝试操作字符串？

例如，如果“标题”<a> 元素应用了此类/样式...

.t-entry-title a {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

...我认为内容会根据您的页面元素允许的间距进行调整（当然，如果不查看页面的其余部分就很难知道）。