有几件事。首先，您的标题返回的是对象，而不是字符串。因为它是一个 HTML 元素。 在循环中， titles[i].length 检查当前 HTML 元素的长度，这是不可能的，长度检查的是数组或字符串的长度。所以你应该使用 titles.length ，它是一个 HTML 元素的数组集合。

这也意味着对于截断函数，你向函数发送的是 HTML 元素，而不是字符串。要传递字符串，你应该以标题内的 b 元素为目标，这样你就不会忽略 HTML 结构，然后获取 textContent 进行进一步处理 -> const text = titles[i].querySelector('b').textContent

所以你的函数将如下所示：

var titles = document.querySelectorAll("#title")

function truncate(input) {
   if (input.length > 10)
      return input.substring(0,10) + '...';
   else
      return input;
};


for(i=0; i < titles.length; i++){
    const text = titles[i].querySelector('b').textContent
    titles[i].querySelector('b').textContent =  truncate(text)
}

<div class="container mx-auto px-4 mt-8">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma">



       <div class="w3-row-padding">

  <div class="w3-quarter w3-container w3-margin-bottom">


      <img class="card-img-top" src="https://www.w3schools.com//w3images/mountains.jpg" alt="Card image" style="">
      <div class="w3-container w3-white">
        <h5 class="card-title" id = "title"><b>Hfe</b></h5>
        <p class="card-text">dvcd</p>

      </div>
    </div>
<div class="w3-quarter w3-container w3-margin-bottom">


      <img class="card-img-top" src="https://www.w3schools.com//w3images/mountains.jpg" alt="Card image" style="">
      <div class="w3-container w3-white">
        <h5 class="card-title" id = "title"><b>nbvn</b></h5>
        <p class="card-text">vbnv</p>

      </div>
    </div>
<div class="w3-quarter w3-container w3-margin-bottom">


      <img class="card-img-top" src="https://www.w3schools.com//w3images/mountains.jpg" alt="Card image" style="">
      <div class="w3-container w3-white">
        <h5 class="card-title" id = "title"><b>New post</b></h5>
        <p class="card-text">New</p>

      </div>
    </div>
<div class="w3-quarter w3-container w3-margin-bottom">


      <img class="card-img-top" src="https://www.w3schools.com//w3images/mountains.jpg" alt="Card image" style="">
      <div class="w3-container w3-white">
        <h5 class="card-title" id = "title"><b>Again</b></h5>
        <p class="card-text">mnmbmbm</p>

      </div>
    </div>
<div class="w3-quarter w3-container w3-margin-bottom">


      <img class="card-img-top" src="https://www.w3schools.com//w3images/mountains.jpg" alt="Card image" style="">
      <div class="w3-container w3-white">
        <h5 class="card-title" id = "title"><b>mn,</b></h5>
        <p class="card-text">m</p>

      </div>
    </div>
<div class="w3-quarter w3-container w3-margin-bottom">


      <img class="card-img-top" src="https://www.w3schools.com//w3images/mountains.jpg" alt="Card image" style="">
      <div class="w3-container w3-white">
        <h5 class="card-title" id = "title"><b>Reacting to the the funniest breakup texts</b></h5>
        <p class="card-text">sfd</p>

      </div>
    </div>
<div class="w3-quarter w3-container w3-margin-bottom">


      <img class="card-img-top" src="https://www.w3schools.com//w3images/mountains.jpg" alt="Card image" style="">
      <div class="w3-container w3-white">
        <h5 class="card-title" id = "title"><b>.m,m,</b></h5>
        <p class="card-text">nvb, ,bmvbcv
vcnbcm mbnmnbm,.mnm,,m.m,m,</p>

      </div>
    </div>
<div class="w3-quarter w3-container w3-margin-bottom">


      <img class="card-img-top" src="https://www.w3schools.com//w3images/mountains.jpg" alt="Card image" style="">
      <div class="w3-container w3-white">
        <h5 class="card-title" id = "title"><b>DVGGGGGGGGGGHDGGGGGGGGGHHHHHHGGGGGGGGGGGGGGGGGGGGGGGGGGG</b></h5>
        <p class="card-text">GGGGGG</p>

      </div>
    </div>

  </div>

在 for 循环中使用 titles.length 而不是 titles[i].length 。 titles[i] 将给出元素，并且没有元素具有与之关联的 .length 方法。因此出现错误