一、功能需求分析与设计原则

在信息爆炸时代，用户对内容消费的效率要求持续提升。文本收起/展开功能通过动态控制内容展示量，有效平衡信息密度与阅读体验。该功能核心需求包含：

1. 视觉提示：通过省略号(…)明确标识隐藏内容存在
2. 交互反馈：提供直观的触发控件（按钮/图标/文字链接）
3. 状态管理：区分展开/收起两种状态并保持视觉一致性
4. 响应速度：确保状态切换在100ms内完成

设计时应遵循WCAG 2.1无障碍指南，确保：

• 键盘可操作性（Tab键导航）
• 屏幕阅读器兼容性（ARIA属性）
• 焦点管理（避免焦点丢失）
• 颜色对比度（文本与背景≥4.5:1）

二、前端实现技术方案

1. 纯CSS实现方案

<div class="text-container">
  <p class="content">
    这里是完整文本内容，当超过容器高度时会被截断并显示省略号...
    <span class="more-text">这里是隐藏的扩展内容，通过CSS选择器控制显示</span>
  </p>
  <button class="toggle-btn">展开</button>
</div>
<style>
.content {
  max-height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  position: relative;
}
.more-text {
  display: none;
}
.content.expanded {
  max-height: none;
  -webkit-line-clamp: unset;
}
.content.expanded + .more-text {
  display: inline;
}
</style>

局限性：

• 仅支持单行/多行文本截断
• 无法处理动态内容变化
• 浏览器兼容性问题（需测试-webkit-前缀支持）

2. JavaScript动态控制方案

class TextToggle {
  constructor(container, options = {}) {
    this.container = container;
    this.maxLines = options.maxLines || 2;
    this.ellipsis = '...';
    this.init();
  }
  init() {
    const content = this.container.querySelector('.js-content');
    const toggleBtn = this.container.querySelector('.js-toggle');
    const fullText = content.innerHTML;
    // 初始截断处理
    this.truncateText(content, this.maxLines);
    // 事件监听
    toggleBtn.addEventListener('click', () => {
      const isExpanded = content.classList.contains('expanded');
      if (isExpanded) {
        this.truncateText(content, this.maxLines);
        toggleBtn.textContent = '展开';
      } else {
        content.innerHTML = fullText;
        content.classList.add('expanded');
        toggleBtn.textContent = '收起';
      }
    });
  }
  truncateText(element, lines) {
    const temp = element.cloneNode();
    temp.style.visibility = 'hidden';
    temp.style.position = 'absolute';
    temp.style.whiteSpace = 'nowrap';
    document.body.appendChild(temp);
    // 实际项目中需替换为精确计算行高的逻辑
    const lineHeight = parseInt(getComputedStyle(element).lineHeight);
    const maxHeight = lines * lineHeight;
    // 简化版：实际需逐字符截断并检测高度
    element.style.maxHeight = `${maxHeight}px`;
    element.style.overflow = 'hidden';
    element.style.textOverflow = 'ellipsis';
    element.style.display = '-webkit-box';
    element.style.webkitLineClamp = lines;
    element.style.webkitBoxOrient = 'vertical';
    document.body.removeChild(temp);
  }
}
// 使用示例
document.querySelectorAll('.text-toggle').forEach(el => {
  new TextToggle(el);
});

优化建议：

• 使用Intersection Observer实现懒加载
• 添加防抖处理（debounce）优化频繁触发
• 实现渐进式渲染（先显示占位符后加载内容）

三、工程化实践要点

1. 性能优化策略

1. 虚拟滚动：长列表场景下仅渲染可视区域内容
2. 预计算高度：服务端返回内容时附带行高信息
3. Web Worker：复杂文本分析任务移至后台线程
4. CSS硬件加速：对切换元素使用transform: translateZ(0)

2. 跨平台兼容方案

特性	Chrome	Firefox	Safari	Edge
line-clamp	46+	71+	13.1+	79+
替代方案	JS计算	JS计算	-webkit前缀	需测试

Polyfill方案：

if (!CSS.supports('display', '-webkit-box')) {
  // 实现基于字符计数的截断算法
  function fallbackTruncate(element, maxLines) {
    const style = window.getComputedStyle(element);
    const lineHeight = parseInt(style.lineHeight);
    const maxHeight = maxLines * lineHeight;
    // 字符级截断逻辑...
  }
}

四、高级功能扩展

1. 智能截断算法

function smartTruncate(text, maxChars, ellipsis = '...') {
  if (text.length <= maxChars) return text;
  // 寻找最佳截断点（避免单词中间截断）
  let truncatePos = maxChars;
  while (truncatePos > 0 && text[truncatePos] !== ' ') {
    truncatePos--;
  }
  return text.slice(0, truncatePos) + ellipsis;
}

2. 多级展开控制

class MultiLevelToggle {
  constructor(container) {
    this.levels = [
      { selector: '.summary', maxHeight: '60px' },
      { selector: '.details', maxHeight: '120px' },
      { selector: '.full', maxHeight: 'none' }
    ];
    this.init(container);
  }
  init(container) {
    this.levels.forEach((level, index) => {
      const element = container.querySelector(level.selector);
      if (element) {
        element.style.maxHeight = level.maxHeight;
        element.dataset.level = index;
      }
    });
  }
  toggleLevel(container, levelIndex) {
    this.levels.forEach((level, index) => {
      const element = container.querySelector(level.selector);
      if (element) {
        element.style.maxHeight = index <= levelIndex ? 'none' : level.maxHeight;
      }
    });
  }
}

五、测试与质量保障

1. 可视化回归测试：使用Puppeteer截图对比
2. 性能基准测试：Lighthouse评分需≥90
3. 无障碍验证：axe-core扫描无严重问题
4. 响应式测试：覆盖320px-1920px屏幕宽度

测试用例示例：

describe('Text Toggle Component', () => {
  it('should truncate text correctly', () => {
    const container = document.createElement('div');
    container.innerHTML = `
      <div class="text-toggle">
        <div class="js-content">${longText}</div>
        <button class="js-toggle">Toggle</button>
      </div>
    `;
    new TextToggle(container);
    const content = container.querySelector('.js-content');
    expect(content.scrollHeight).toBeGreaterThan(content.clientHeight);
  });
});

六、最佳实践建议

1. 渐进增强策略：基础功能依赖CSS，增强功能使用JS
2. 数据驱动设计：通过props控制最大行数/展开按钮文本
3. 国际化支持：处理多语言文本长度差异
4. 服务端渲染：首屏直接返回截断后的HTML

性能监控指标：

• 首次内容绘制(FCP) < 1s
• 交互响应时间 < 100ms
• 内存占用增量 < 50KB/次切换

通过系统化的技术实现与优化策略，文本收起/展开功能可显著提升用户信息获取效率。实际开发中应结合具体业务场景，在功能完整性与性能表现间取得平衡，持续通过A/B测试验证设计效果。