Обрезаем текст по количеству слов или по размерам блока с помощью jQuery

На одном из проектов необходимо было сделать блок с превью новостей, то есть блоки в слайдере с картинкой и анонсом. По умолчанию, на сайтах данные анонсы обрезают по количеству символов, что не совсем красиво, а задача состоит в том, чтобы контент обрезался не по количеству символов, а вплотную к краям блока.

Данный код режет текст по количеству символов, что не совсем красиво:

// Cut long Title in the SLider
$(function() {
  function cutLongText(textSize, finalLength) {
    $('.news').each(function() {
      if ($(this).text().length > textSize) {
        $(this).html($(this).text().slice(0, finalLength) + '...');
      }
    })
  }
  cutLongText(50, 50);
});

Данный код режет текст по словам в зависимости от размеров блока, впритык к родительскому блоку анонса:

// Crop title in the News
$(function() {
  (function cropTitle() {
    $(".news").each(function() {
      var $title = $(this).find("p");

      while ($title.height() > $(this).height()) {
        $title.text($title.text().split(" ").slice(0, $title.text().split(" ").length - 1).join(" ") + "...");
      }
    });
  })();
});

В примере используются классы и стили просто для наглядности. При изменении ширины экрана, нажмите «Rerun» или обновите, чтобы скрипт высчитал новые размеры родительского блока и тестового блока.

See the Pen Crop title By JS by Denis (@deniscreative) on CodePen.