如何用JavaScript截断指定类下<p>标签内超100字符的文本？

当然可以实现这个需求，以下是针对你提供的示例结构编写的代码：

示例HTML结构 #

<div class='classname'> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nibh velit, suscipit bibendum sagittis non, consequat vestibulum ante. Praesent in fermentum turpis. Nam nec erat vulputate, imperdiet mi ac, porttitor diam. Quisque posuere odio vel nulla varius dictum. Vestibulum malesuada tellus id cursus pretium. Cras volutpat, diam vel molestie bibendum, neque risus ullamcorper augue, vel convallis odio purus hendrerit quam. Mauris convallis dolor vel ex placerat, non imperdiet dolor lacinia. </p>
</div>

JavaScript实现代码 #

// 页面加载完成后执行，确保DOM元素已存在
document.addEventListener('DOMContentLoaded', () => {
  // 选中所有拥有指定类的容器
  const targetContainers = document.querySelectorAll('.classname');
  
  targetContainers.forEach(container => {
    // 获取容器内的所有<p>标签
    const paragraphs = container.querySelectorAll('p');
    
    paragraphs.forEach(p => {
      // 获取文本内容并去除前后空白
      const rawText = p.textContent.trim();
      const maxAllowedLength = 100;
      
      // 判断文本长度是否超出限制
      if (rawText.length > maxAllowedLength) {
        // 截断文本并添加省略号
        const processedText = rawText.slice(0, maxAllowedLength) + '...';
        p.textContent = processedText;
      }
      // 长度未超出则保持原文本不变
    });
  });
});

处理效果 #

执行代码后，目标<p>标签的文本会被处理为：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nibh velit, suscipit bibendum sagittis non, consequat ...

补充说明 #

• trim()方法用于去除文本前后的空白字符，避免这些空白干扰长度计算，如果你不需要这个处理，可以直接使用p.textContent
• slice(0, maxAllowedLength)会截取从开头到第100个字符的内容，确保不超过限制长度
• 如果页面中有多个.classname容器，这段代码会遍历所有容器下的<p>标签，统一处理

内容的提问来源于stack exchange，提问作者cdt