0

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

Sunil Kumar
  • 3,142
  • 1
  • 19
  • 33
Mr Toad
  • 202
  • 2
  • 12
  • 41

2 Answers2

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);
});
Baptistou
  • 1,749
  • 1
  • 13
  • 24
  • This is perfect. Thank you so much. This is not the first time I have wanted a function like this to even up posts so as well as for my current site, I will definitely re-use this in the future. Thanks! – Mr Toad Nov 05 '19 at 16:30
0

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

SteveR
  • 1,015
  • 8
  • 12
  • Hi there. I would usually trim long titles but in this case the client specifically does not want the titles trimmed and unfortunately the vary greatly in length. They are less worries 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 I hope this helps - I have added this to my original question – Mr Toad Oct 30 '19 at 21:37
  • Ok, then what about using this styling on the excerpts only? – SteveR Oct 30 '19 at 22:11
  • I'm sorry but I don't see how this is any different then trimming the excerpt by character? I can trim the heights of the excerpt box but what I really need is that height to change based on the height of the title. I need something like -webkit-box-orient: vertical; and webkit-line-clamp; but applied to the whole post (so for example clamping 5 lines that can be made up of a title AND excerpt, with the title taking priority) – Mr Toad Oct 30 '19 at 23:01
  • If you could update your question to include a sample of the html with the problem data, it would be easier to show you what I'm thinking... – SteveR Oct 31 '19 at 14:27
  • Hey @steveR - Thankyou for your help. In the end the JS solution above worked perfectly so I have given the bounty. – Mr Toad Nov 05 '19 at 16:28