实现长文本收缩展开的UI优化方案

解决长文本导致的界面溢出问题，建议采用以下三个关键步骤实现：

1. 样式限制 (CSS)

通过CSS控制容器的最大显示高度和溢出隐藏。

.message-content {
  max-height: 200px; /* 设置初始显示的最大高度 */
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s ease;
}
.message-content.expanded {
  max-height: none;
}

2. 状态控制 (JavaScript)

在前端渲染消息时，判断内容行数或字符长度，动态添加“展开/收起”按钮。

function toggleExpand(btn) {
  const content = btn.previousElementSibling;
  content.classList.toggle('expanded');
  btn.innerText = content.classList.contains('expanded') ? '收起' : '展开全文';
}

3. 核心逻辑建议

• 智能判断：不要对所有消息都应用此逻辑，建议设置阈值（如超过10行或600字时自动启用该交互）。
• 用户体验：展开后最好能有平滑的动画效果，避免页面高度突变造成视觉跳动。
• 数据一致性：收起或展开状态仅影响当前会话的视觉展现，不影响后端存储的原始数据，确保逻辑解耦。