0

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

目前我可以独立完成这两项工作 - 通过主题设置的摘录和通过 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 个单词，因此需要摘录来平衡高度 - 无论是用作旋转木马还是用作网格

4

2 回答 2

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);
});
于 2019-10-31T09:01:48.460 回答
0

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

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

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

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

于 2019-10-30T16:00:09.830 回答