长文本折叠展开实现指南

实现长文本“折叠/展开”功能，核心思路是 CSS 样式控制配合 JS 状态切换。具体步骤如下：

1. CSS 定义样式

首先定义一个基础容器样式，限制高度并隐藏溢出内容：

.msg-content {
  max-height: 200px; /* 限制初始高度 */
  overflow: hidden;
  transition: max-height 0.3s ease;
  position: relative;
}
.msg-content.expanded {
  max-height: none; /* 展开时取消高度限制 */
}

2. HTML 结构

在你的消息气泡中加入“展开/收起”按钮：

<div class="msg-wrapper">
  <div id="content-body" class="msg-content">这里是你超长的文本内容...</div>
  <button onclick="toggleContent()">展开/收起</button>
</div>

3. JavaScript 控制逻辑

通过切换 class 来改变容器的状态：

function toggleContent() {
  const el = document.getElementById('content-body');
  el.classList.toggle('expanded');
}

进阶优化建议：

• 自动检测：在 JS 中通过 el.scrollHeight > el.clientHeight 判断内容是否超长，如果没超长，则自动隐藏“展开”按钮。
• 遮罩效果：在折叠状态下，可以在底部加一个 linear-gradient 的透明遮罩层，提示用户下方还有内容，视觉上更友好。