一、功能需求与技术背景

在信息爆炸的互联网环境中，长文本的合理展示成为用户体验的关键。当内容超出容器宽度时，直接截断会导致信息丢失，而完全展开又会破坏页面布局。省略号后的文字添加与文本收起/展开功能通过动态交互解决了这一矛盾：默认显示部分内容（以省略号结尾），用户点击后展开全文，再次点击则收起。这种模式广泛应用于新闻摘要、商品描述、评论系统等场景，兼顾了信息密度与可读性。

从技术实现角度看，该功能涉及三个核心环节：

1. 文本截断：通过CSS将超长文本截断并显示省略号
2. 状态管理：识别当前是”收起”还是”展开”状态
3. 交互响应：通过JavaScript监听点击事件并切换状态

二、CSS文本截断技术实现

2.1 单行文本截断

单行文本截断是最基础的实现方式，核心代码为：

.ellipsis {
  white-space: nowrap;      /* 禁止换行 */
  overflow: hidden;         /* 隐藏溢出内容 */
  text-overflow: ellipsis;  /* 显示省略号 */
  width: 200px;             /* 固定容器宽度 */
}

关键点说明：

• white-space: nowrap确保文本不换行
• overflow: hidden与text-overflow: ellipsis配合实现省略号效果
• 必须指定容器宽度（固定值或百分比）

2.2 多行文本截断

多行截断需要更复杂的处理，传统方案是使用-webkit-line-clamp：

.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 3;    /* 限制显示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

局限性：

• 仅适用于WebKit内核浏览器（Chrome、Safari等）
• 无法通过纯CSS实现展开/收起切换

跨浏览器解决方案：
对于需要兼容性更好的场景，可采用JavaScript计算高度的方式：

function truncateMultiLine(element, maxLines) {
  const lineHeight = parseInt(getComputedStyle(element).lineHeight);
  const maxHeight = lineHeight * maxLines;
  if (element.scrollHeight > maxHeight) {
    // 添加省略号逻辑（需手动插入省略号元素）
  }
}

三、JavaScript交互实现

3.1 基础实现方案

完整的收起/展开功能需要以下步骤：

1. 创建切换按钮
2. 监听点击事件
3. 切换文本显示状态
4. 更新按钮文本

示例代码：

<div class="content-wrapper">
  <div class="text-content" id="textContent">
    这里是超长的文本内容，当超出容器时会显示省略号，点击按钮可以展开或收起全文。
  </div>
  <button class="toggle-btn" id="toggleBtn">展开</button>
</div>
<script>
  const textContent = document.getElementById('textContent');
  const toggleBtn = document.getElementById('toggleBtn');
  const fullText = textContent.innerHTML; // 保存完整文本
  // 初始截断（需配合CSS实现）
  textContent.innerHTML = fullText.substring(0, 50) + '...';
  toggleBtn.addEventListener('click', () => {
    if (textContent.innerHTML.includes('...')) {
      textContent.innerHTML = fullText;
      toggleBtn.textContent = '收起';
    } else {
      textContent.innerHTML = fullText.substring(0, 50) + '...';
      toggleBtn.textContent = '展开';
    }
  });
</script>

3.2 优化实现方案

基础方案存在两个问题：

1. 硬编码截断位置（50字符）不精确
2. 切换时文本突然变化影响体验

优化方案：

function setupToggle(element, btn) {
  const fullText = element.innerHTML;
  let isExpanded = false;
  // 精确计算截断位置
  function truncate() {
    const temp = element.cloneNode(true);
    temp.style.visibility = 'hidden';
    temp.style.whiteSpace = 'nowrap';
    document.body.appendChild(temp);
    let width = temp.getBoundingClientRect().width;
    let truncated = '';
    let charCount = 0;
    for (let i = 0; i < fullText.length; i++) {
      truncated += fullText[i];
      temp.innerHTML = truncated + '...';
      if (temp.getBoundingClientRect().width > element.offsetWidth) {
        break;
      }
    }
    document.body.removeChild(temp);
    return truncated.length > 0 ? truncated + '...' : fullText;
  }
  // 初始状态
  let truncatedText = truncate();
  element.innerHTML = truncatedText;
  btn.addEventListener('click', () => {
    isExpanded = !isExpanded;
    element.innerHTML = isExpanded ? fullText : truncate();
    btn.textContent = isExpanded ? '收起' : '展开';
  });
}
// 使用示例
setupToggle(document.getElementById('textContent'), 
           document.getElementById('toggleBtn'));

四、高级功能扩展

4.1 动画效果实现

通过CSS过渡增强切换体验：

.text-content {
  transition: height 0.3s ease;
  overflow: hidden;
}

JavaScript中动态设置高度：

function toggleWithAnimation(element, btn) {
  const fullHeight = element.scrollHeight;
  let isExpanded = false;
  btn.addEventListener('click', () => {
    isExpanded = !isExpanded;
    element.style.height = isExpanded ? `${fullHeight}px` : 'auto';
    // 需要额外处理省略号显示逻辑
  });
}

4.2 响应式设计适配

针对不同屏幕尺寸调整截断行数：

function responsiveTruncate(element) {
  const mqSmall = window.matchMedia('(max-width: 600px)');
  const mqMedium = window.matchMedia('(max-width: 900px)');
  function updateTruncate() {
    if (mqSmall.matches) {
      // 移动端显示2行
      element.style.webkitLineClamp = '2';
    } else if (mqMedium.matches) {
      // 平板显示4行
      element.style.webkitLineClamp = '4';
    } else {
      // 桌面显示6行
      element.style.webkitLineClamp = '6';
    }
  }
  mqSmall.addListener(updateTruncate);
  mqMedium.addListener(updateTruncate);
  updateTruncate();
}

五、性能优化与最佳实践

1. 事件委托：对于列表项中的多个收起/展开按钮，使用事件委托减少事件监听器数量

   document.querySelector('.list-container').addEventListener('click', (e) => {
   if (e.target.classList.contains('toggle-btn')) {
    const item = e.target.closest('.list-item');
    // 处理切换逻辑
   }
   });

2. 防抖处理：窗口resize事件中避免频繁计算

   let resizeTimer;
   window.addEventListener('resize', () => {
   clearTimeout(resizeTimer);
   resizeTimer = setTimeout(() => {
    // 执行调整逻辑
   }, 200);
   });

3. 无障碍设计：

   • 为按钮添加aria-expanded属性
   • 确保键盘可操作（tabindex和keydown事件）

     <button class="toggle-btn" 
        id="toggleBtn" 
        aria-expanded="false"
        tabindex="0">展开</button>

六、常见问题解决方案

1. 文本内容动态加载：
   当内容通过AJAX加载时，需在内容加载完成后初始化功能：

   fetch('/api/content')
   .then(res => res.text())
   .then(text => {
    document.getElementById('textContent').innerHTML = text;
    setupToggle(document.getElementById('textContent'), 
               document.getElementById('toggleBtn'));
   });

2. 富文本处理：
   对于包含HTML标签的内容，需使用DOM操作而非字符串截断：

   function truncateRichText(element, maxHeight) {
   while (element.scrollHeight > maxHeight && 
         element.childNodes.length > 0) {
    element.removeChild(element.lastChild);
   }
   if (element.scrollHeight <= maxHeight && 
      element.childNodes.length > 0 && 
      element.lastChild.nodeType === Node.TEXT_NODE) {
    const lastText = element.lastChild;
    const text = lastText.nodeValue;
    lastText.nodeValue = text.substring(0, text.length - 3) + '...';
   }
   }

3. 国际化支持：
   不同语言的省略号显示可能不同（如中文用”…”，日文用”…”），需根据语言环境调整。

七、总结与展望

省略号后的文字添加与文本收起/展开功能通过CSS与JavaScript的协同工作，实现了内容展示与空间利用的完美平衡。从基础实现到高级优化，开发者需要考虑浏览器兼容性、性能表现、无障碍访问等多个维度。未来随着CSS Grid和Container Queries等新特性的普及，该功能的实现将更加简洁高效。建议开发者在实际项目中：

1. 优先使用CSS方案实现简单截断
2. 复杂场景采用JavaScript精确控制
3. 始终进行性能测试和跨浏览器验证
4. 遵循无障碍设计原则提升包容性

通过合理应用这些技术，可以显著提升Web应用的用户体验和信息传达效率。