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

Question

我试过的例子给了我 [object NodeList]。所以我想做的是截断文本段落，这样我就可以添加一个显示更多按钮来显示其余文本。

  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

您忘记了函数参数..

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>

P.S。使用 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>

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

How do I truncate a string of text to a number of characters ending with ellipsis for an array of paragraph tags using JavaScript

javascript

foreach

truncate

selectors-api