更改类别页面上每个帖子的摘录

在分类页面中，每个帖子都有不同的摘录。我需要根据窗口宽度使用javascript来修剪该摘录。我删除了带有窗口宽度的代码，因为它不相关。我的问题是，当前的代码用第一个代码替换了所有摘录。显然，因为theString取第一个值。

你可以在这里看到代码：

function trimWords(){
  var contentWidth = $(window).width(); //get width of browser
  var maxLength = 20 // maximum number of characters to extract
  
  //trim the string to the maximum length
  var trimmedString = theString.substr(0, maxLength);
  //re-trim if we are in the middle of a word
  trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")));
  $(".trimmed-words").html(trimmedString);
}
if ($(".trimmed-words").length > 0){
  var theString = $(".trimmed-words").html(); //issue here. it takes only the first value from the first div
  trimWords();
  $(window).resize(trimWords)
}
		

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="individual-post">
  <div class="trimmed-words">
    first first first first first first first
    </div>
  </div>
<div class="individual-post">
  <div class="trimmed-words">
    second second second second second second 
    </div>
  </div>
<div class="individual-post">
  <div class="trimmed-words">
    third third third third third third third 
    </div>
  </div>
<div class="individual-post">
  <div class="trimmed-words">
    fourth fourth fourth fourth fourth fourth 
    </div>
  </div>

我需要做一些事情：

$(".individual-post").each(function(){ //loop through every div
    var theString = $(this).find(".trimmed-words").html();              
    trimWords(theString);
});

但是我无法转移theString的值。

如果能为我指明正确的方向，我将不胜感激。

谢谢。