修剪標題和摘錄組合的總字符值

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) + '...');
});

但我不知道如何留下完整的標題長度，然后計算 rest 等於 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 樣式來修剪長字符串以適合其容器？

例如，如果“title” <a>元素應用了此類/樣式...

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

...我認為內容會調整為您的頁面元素允許的任何間距（當然，如果沒有看到頁面的 rest 就很難知道）。