Trim 标题和摘录的总字符值

Question

我想要 trim post 标题和摘录的组合添加字符值。

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

然而，标题长度差异很大，以至于每个 post 预览的高度差异很大，看起来很乱。

有没有一种方法可以将标题和摘录中的字符总数相加，然后添加 trim - 最终结果是 post 的标题较长，但部分较短显示的摘录，总共最多 100 个字符作为起点。

标题的目标是：

.t-entry-title a

以及

的摘录

.t-entry-excerpt

过去我曾设法将此添加到 trim 我的头衔

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

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

提前致谢。

编辑 -

我通常 trim 长标题，但在这种情况下，客户特别不想要 trimmed 标题，不幸的是它们的长度差异很大。

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

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

Answer 1

有没有理由不使用 CSS 样式来 trim 长字符串来适应它们的容器，而不是试图操纵字符串？

例如，如果 "title" <a> 元素应用了此 class/style...

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

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

Answer 2

如果您的 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);
});

Trim 标题和摘录的总字符值

Trim the total character value of title and excerpt combined

javascript

jquery

character-trimming