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

Question

I would like to trim the combined added character value of a post title and excerpt.

Currently I can do both independently - the excerpt through the theme settings and the Post title though JS.

However, the title lengths vary so much that the height of each post preview varies greatly and looks messy.

Is there a way to add the total number of characters in the title AND the excerpt and then trim - the end result being that posts with a longer title have a shorter portion of the excerpt displaying, with a max of say 100 characters in total as a starting point.

The title is targeted with:

.t-entry-title a

And the excerpt with

.t-entry-excerpt

in the past I have managed to get this to trim my titles

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

But I can't work out how to leave the full title length and then calculate the rest being say 100 (total characters) minus the title and then allocate the remaining characters to the post excerpt.

Thanks in advance.

Edit -

I would usually trim long titles but in this case the client specifically does not want the titles trimmed and unfortunately they vary greatly in length.

They are less worried about the trimming of the excerpt and thus would like to show it only when there are characters available.

Some titles are very short - for example 2 words and so need the excerpt to balance out the height - both when used as a carousel and as a grid

Answer 1

If your HTML is structured such as below:

<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>

Then in javascript you can do:

//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

Instead of trying to manipulate the strings, is there a reason to NOT use CSS styling to trim long strings to fit their containers?

For instance, if the "title" <a> elements had this class/style applied...

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

...I'm thinking the contents would adjust to whatever spacing your page elements allow ( of course, it's hard to know without seeing the rest of the page ).