Обрезать общее значение символа заголовка и выдержки вместе

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

Но я не могу понять, как покинутьполная длина заголовка, а затем вычислите остальное, скажем, 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> был этот класс/ style apply ...

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

... Я думаю, что содержимое будет корректироваться в соответствии с тем интервалом, который позволяют элементы вашей страницы ( конечно, трудно понять, не видя остальную частьстраница ).