如何使用 JavaScript 将文本字符串截断为以省略号结尾的多个字符以用于段落标签数组

Question

My example I've tried, gives me [object NodeList]. So what I'm trying to do, is truncate paragraphs of text, so that I can add a show more button to display the rest of the text.

  var testimonialFeedback = document.querySelectorAll('.expanded-text'); 

  var testimonialArray = [...testimonialFeedback];

  
  function ellipsify () {
          if (testimonialFeedback.length > 100) {
              return (testimonialFeedback.substring(0, 100) + "...");
          }
          else {
          return testimonialFeedback;
      }
  }

  testimonialArray.forEach(e => {
    e.textContent = ellipsify(testimonialFeedback.textContent);
  });

Answer 1

You have forgotten the function param..

 const testimonialFeedback = document.querySelectorAll('.expanded-text'); const testimonialArray = [...testimonialFeedback]; const testimonialFeedbackMaxLength = 100; function ellipsify (testimonialFeedback) { if (testimonialFeedback.length > testimonialFeedbackMaxLength) { testimonialFeedback = testimonialFeedback.substring(0, testimonialFeedbackMaxLength) + "..."; } return testimonialFeedback; } testimonialArray.forEach(e => { e.textContent = ellipsify(e.textContent); });

 .expanded-text { border: 1px solid grey; }

 <div class="expanded-text">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.</div> <div class="expanded-text">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.</div> <div class="expanded-text">Lorem ipsum dolor sit amet</div>

PS it is easier to do with text-overflow css.

 .expanded-text { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid grey; }

 <div class="expanded-text">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.</div> <div class="expanded-text">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.</div> <div class="expanded-text">Lorem ipsum dolor sit amet</div>