一、功能需求与技术背景

在内容密集型应用中，长文本的展示与交互设计直接影响用户体验。当文本长度超出容器限制时，传统处理方式通常采用截断显示并添加省略号（…），但这种方式存在两个核心问题：信息完整性与交互连续性。用户需要点击或操作后才能查看完整内容，而收起/展开功能正是解决这一痛点的关键方案。

从技术实现角度看，该功能涉及CSS文本溢出控制、JavaScript事件监听、DOM操作及状态管理。现代前端框架（如React、Vue）提供了更简洁的实现方式，但原生JavaScript方案仍具有普适性。根据W3C标准，text-overflow: ellipsis属性是实现省略号效果的基础，而动态内容切换需要结合display或visibility属性的控制。

二、核心实现方案

1. CSS基础样式设置

.text-container {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.full-text {
  display: none; /* 初始隐藏完整文本 */
  white-space: normal;
  word-break: break-word;
}

此方案通过white-space: nowrap强制单行显示，结合text-overflow: ellipsis实现截断效果。完整文本容器初始设置为display: none，为后续交互做准备。

2. JavaScript交互逻辑

function toggleText(containerId) {
  const container = document.getElementById(containerId);
  const ellipsisText = container.querySelector('.ellipsis-text');
  const fullText = container.querySelector('.full-text');
  const toggleBtn = container.querySelector('.toggle-btn');
  toggleBtn.addEventListener('click', () => {
    const isExpanded = fullText.style.display === 'block';
    ellipsisText.style.display = isExpanded ? 'block' : 'none';
    fullText.style.display = isExpanded ? 'none' : 'block';
    toggleBtn.textContent = isExpanded ? '展开' : '收起';
  });
}

该函数通过DOM操作实现状态切换，核心逻辑包括：显示/隐藏控制、按钮文本动态更新。实际项目中建议使用状态管理库（如Redux、Vuex）来维护展开状态。

3. 多行文本处理方案

对于需要多行截断的场景，可采用CSS -webkit-line-clamp属性：

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

配合JavaScript检测文本高度，动态计算是否需要显示展开按钮：

function checkOverflow(element) {
  return element.scrollHeight > element.clientHeight;
}

三、优化策略与实践建议

1. 性能优化

• 事件委托：对于动态生成的列表项，采用事件委托减少监听器数量

  document.addEventListener('click', (e) => {
  if (e.target.classList.contains('toggle-btn')) {
    // 处理展开/收起逻辑
  }
  });

• 防抖处理：对频繁触发的窗口resize事件进行防抖
• 虚拟滚动：超长列表场景下结合虚拟滚动技术

2. 无障碍设计

• ARIA属性：添加aria-expanded和aria-controls属性

  <button 
  aria-expanded="false" 
  aria-controls="fullText"
  >展开</button>

• 键盘导航：确保按钮可通过Tab键访问，支持Enter/Space键触发
• 屏幕阅读器适配：提供隐藏的文本说明

3. 动画效果增强

使用CSS Transition实现平滑过渡：

.full-text {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.full-text.expanded {
  max-height: 500px; /* 根据实际内容调整 */
}

JavaScript中通过类名切换控制动画：

fullText.classList.toggle('expanded');

四、框架集成方案

React实现示例

function ExpandableText({ text, maxLines = 3 }) {
  const [isExpanded, setIsExpanded] = useState(false);
  const ref = useRef();
  const shouldTruncate = () => {
    if (!ref.current) return false;
    return ref.current.scrollHeight > ref.current.clientHeight;
  };
  return (
    <div className="text-wrapper">
      <div 
        ref={ref}
        className={`text-content ${isExpanded ? 'expanded' : ''}`}
        style={{
          display: '-webkit-box',
          WebkitLineClamp: isExpanded ? 'unset' : maxLines,
          WebkitBoxOrient: 'vertical',
          overflow: 'hidden'
        }}
      >
        {text}
      </div>
      {shouldTruncate() && (
        <button onClick={() => setIsExpanded(!isExpanded)}>
          {isExpanded ? '收起' : '展开'}
        </button>
      )}
    </div>
  );
}

Vue实现要点

Vue3的组合式API提供了更简洁的实现方式：

import { ref, computed, onMounted } from 'vue';
export default {
  props: ['text'],
  setup(props) {
    const isExpanded = ref(false);
    const shouldTruncate = ref(false);
    const textRef = ref(null);
    const checkOverflow = () => {
      if (!textRef.value) return;
      shouldTruncate.value = textRef.value.scrollHeight > textRef.value.clientHeight;
    };
    onMounted(checkOverflow);
    // 添加resize观察器...
    return { isExpanded, shouldTruncate, textRef };
  }
};

五、常见问题与解决方案

1. 动态内容高度计算不准

解决方案：使用ResizeObserverAPI替代传统resize事件

const observer = new ResizeObserver((entries) => {
  for (let entry of entries) {
    // 处理高度变化
  }
});
observer.observe(textElement);

2. 移动端触摸事件冲突

处理方案：添加touch-action样式并检测触摸设备

.toggle-btn {
  touch-action: manipulation;
}

3. 国际化文本处理

建议将按钮文本提取为配置项：

const i18n = {
  expand: '展开',
  collapse: '收起'
};

六、测试与质量保障

1. 单元测试用例

test('toggleText function changes display state', () => {
  document.body.innerHTML = `
    <div id="test-container">
      <div class="ellipsis-text">短文本</div>
      <div class="full-text" style="display:none">完整文本</div>
      <button class="toggle-btn">展开</button>
    </div>
  `;
  toggleText('test-container');
  const btn = document.querySelector('.toggle-btn');
  btn.click();
  expect(document.querySelector('.full-text').style.display).toBe('block');
});

2. 跨浏览器兼容性

• 添加CSS前缀自动处理工具（如PostCSS）
• 检测-webkit-line-clamp支持情况

  const supportsLineClamp = 'lineClamp' in document.body.style || 
  '-webkit-line-clamp' in document.body.style;

3. 性能基准测试

使用Lighthouse进行审计，重点关注：

• 首次内容绘制(FCP)
• 可交互时间(TTI)
• 无障碍评分

七、进阶应用场景

1. 图片与文本混合展开

function toggleMediaText() {
  const mediaContainer = document.querySelector('.media-wrapper');
  const isExpanded = mediaContainer.classList.contains('expanded');
  mediaContainer.classList.toggle('expanded');
  // 动态调整图片高度
}

2. 嵌套展开结构

采用递归组件模式处理多级展开：

function NestedExpandable({ nodes }) {
  return nodes.map(node => (
    <div key={node.id}>
      <ExpandableText text={node.text} />
      {node.children && (
        <NestedExpandable nodes={node.children} />
      )}
    </div>
  ));
}

3. 持久化状态

结合localStorage保存用户偏好：

function saveExpandState(id, isExpanded) {
  localStorage.setItem(`expand_${id}`, isExpanded);
}
function loadExpandState(id) {
  return localStorage.getItem(`expand_${id}`) === 'true';
}

通过系统化的技术实现与优化策略，省略号后的文字处理与收起/展开功能可显著提升内容展示效率与用户体验。开发者应根据具体场景选择合适方案，兼顾功能完整性与性能表现，同时遵循无障碍设计原则确保产品包容性。