太妙了！！使用CSS+JS实现多行文本的展开收起效果！

在网页开发中，文本内容的动态展示是提升用户体验的关键环节。尤其是当文本内容较长时，如何通过”展开/收起”功能实现空间的高效利用，同时保持界面的简洁性，成为开发者需要解决的痛点问题。本文将通过CSS与JavaScript的协同工作，构建一个高性能、可复用的多行文本展开收起组件，并深入探讨其实现原理与优化策略。

一、核心实现原理

1. CSS限制文本显示行数

CSS的line-clamp属性是实现多行文本截断的核心工具。通过设置display: -webkit-box、-webkit-line-clamp和-webkit-box-orient属性组合，可以精确控制文本的显示行数。例如：

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

技术要点：

-webkit-line-clamp是非标准属性，但现代浏览器均已支持
必须配合overflow: hidden使用，否则截断效果无效
适用于块级元素，对内联元素无效

2. JavaScript动态切换类名

通过JavaScript监听按钮点击事件，动态切换容器的类名，实现展开/收起状态的切换：

const toggleButton = document.querySelector('.toggle-btn');
const textContainer = document.querySelector('.text-container');
toggleButton.addEventListener('click', () => {
  textContainer.classList.toggle('expanded');
  toggleButton.textContent = textContainer.classList.contains('expanded') 
    ? '收起' 
    : '展开';
});

状态管理逻辑：

使用classList.toggle()方法切换expanded类
根据当前状态更新按钮文本
可扩展为多个实例的统一管理

二、完整实现方案

1. HTML结构

<div class="text-wrapper">
  <div class="text-container">
    这里是多行文本内容...（可能很长）
  </div>
  <button class="toggle-btn">展开</button>
</div>

2. CSS样式

.text-wrapper {
  max-width: 600px;
  margin: 0 auto;
}
.text-container {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  margin-bottom: 10px;
}
.text-container.expanded {
  display: block;
  -webkit-line-clamp: unset;
}
.toggle-btn {
  background: none;
  border: 1px solid #1890ff;
  color: #1890ff;
  padding: 5px 15px;
  cursor: pointer;
  border-radius: 4px;
}
.toggle-btn:hover {
  background-color: #e6f7ff;
}

3. JavaScript交互

document.addEventListener('DOMContentLoaded', () => {
  const wrappers = document.querySelectorAll('.text-wrapper');
  wrappers.forEach(wrapper => {
    const container = wrapper.querySelector('.text-container');
    const button = wrapper.querySelector('.toggle-btn');
    // 初始化按钮文本
    button.textContent = '展开';
    button.addEventListener('click', () => {
      const isExpanded = container.classList.toggle('expanded');
      button.textContent = isExpanded ? '收起' : '展开';
      // 可选：添加平滑过渡效果
      container.style.transition = 'all 0.3s ease';
      setTimeout(() => {
        container.style.transition = '';
      }, 300);
    });
  });
});

三、高级优化策略

1. 动态计算行高

对于不同字体大小和行高的场景，可通过JavaScript动态计算容器高度：

function calculateLineHeight(element) {
  const style = window.getComputedStyle(element);
  return parseFloat(style.lineHeight) || 
         parseFloat(style.fontSize) * 1.2; // 默认行高
}
function adjustContainerHeight(container, lines) {
  const lineHeight = calculateLineHeight(container);
  container.style.maxHeight = `${lineHeight * lines}px`;
  container.classList.add('expanded');
  container.style.maxHeight = 'none';
}

2. 动画效果增强

使用CSS Transition实现平滑的展开/收起动画：

.text-container {
  transition: max-height 0.3s ease;
  max-height: 4.5em; /* 3行文本的近似高度 */
}
.text-container.expanded {
  max-height: 1000px; /* 足够大的值以容纳所有内容 */
}

注意事项：

避免使用height: auto的过渡，因为无法计算动画目标值
设置一个足够大的max-height值作为展开状态
精确计算行高可提升动画流畅度

3. 响应式适配

通过媒体查询实现不同屏幕尺寸下的行数调整：

@media (max-width: 768px) {
  .text-container {
    -webkit-line-clamp: 2;
    max-height: 3em;
  }
}

四、常见问题解决方案

1. 兼容性问题处理

对于不支持-webkit-line-clamp的旧浏览器，可使用JavaScript替代方案：

function truncateText(element, lines) {
  const lineHeight = calculateLineHeight(element);
  const maxHeight = lineHeight * lines;
  if (element.scrollHeight > maxHeight) {
    // 使用 ellipsis 类实现截断效果
    element.classList.add('truncated');
    // 创建展开按钮...
  }
}

2. 动态内容处理

当文本内容通过AJAX动态加载时，需要在内容更新后重新初始化组件：

function initTextToggle(container) {
  // 原有的初始化逻辑...
}
// 在AJAX回调中调用
fetchContent().then(html => {
  container.innerHTML = html;
  initTextToggle(container);
});

3. 无障碍访问优化

添加ARIA属性提升可访问性：

button.setAttribute('aria-expanded', 'false');
button.addEventListener('click', () => {
  const isExpanded = container.classList.toggle('expanded');
  button.setAttribute('aria-expanded', isExpanded);
});

五、性能优化建议

事件委托：对于大量实例，使用事件委托减少事件监听器数量
防抖处理：对窗口resize事件进行防抖，避免频繁重计算
CSS硬件加速：对动画元素添加transform: translateZ(0)提升性能
按需加载：对非首屏内容实现懒加载

六、扩展应用场景

评论系统：在长评论中实现展开查看全文功能
新闻列表：在摘要展示与详情查看间切换
产品描述：在电商网站中展示关键特性与完整说明
聊天应用：对长消息实现折叠展示

结论

通过CSS的-webkit-line-clamp属性与JavaScript的动态类名切换，我们实现了一个轻量级、高性能的多行文本展开收起组件。该方案具有以下优势：

纯前端实现，无需后端支持
兼容现代浏览器，有降级方案
可扩展性强，支持多种优化
代码量小，易于维护

开发者可根据实际需求，结合本文提供的优化策略，构建出符合业务场景的文本展示解决方案。这种实现方式不仅提升了用户体验，也体现了前端开发中CSS与JavaScript协同工作的精妙之处。