Next.js多行文本折叠与展开功能实现指南

本文深入介绍一种纯 CSS 配合 React 状态管理的多行文本折叠方案，无需引入任何第三方库，完美兼容 Next.js 服务端渲染环境。通过精确的按行数截断与“展开全文”按钮交互，点击后即可实现平滑的高度过渡动画，为用户提供优雅的内容预览体验。

在内容展示型页面中，多行文本折叠几乎是最常见的交互需求——产品描述、文章摘要、评论区预览等场景，一旦文字过长就需要一种优雅的截断方式。传统 CSS 提供的 text-overflow: ellipsis 虽然简单高效，但天生只支持单行截断，面对多行文本完全无力。依赖第三方库又往往有“杀鸡用牛刀”之感，尤其对于 Next.js 这类对包体积和 SSR 兼容性要求严苛的现代框架，自给自足永远是更优解。

核心原理非常直观：利用 max-height 配合 overflow: hidden 模拟视觉截断，再借助 CSS 过渡实现展开时的平滑动画。行数控制则依靠固定行高换算高度——只要字体大小与行高在组件内保持稳定，计算精度就有保障。下面直接给出一个可复用的组件实现，可直接应用于实际项目。

✅ 推荐实现：Next.js 多行文本折叠组件（纯 CSS + React 高度控制）

// components/CollapsibleText.tsx
'use client';

import { useState } from 'react';

interface CollapsibleTextProps {
  children: string;
  lines?: number; // 默认显示行数，推荐 3 行
  className?: string;
}

export default function CollapsibleText({
  children,
  lines = 3,
  className = '',
}: CollapsibleTextProps) {
  const [expanded, setExpanded] = useState(false);

  // 根据字体大小和行高估算折叠高度（单位 px）
  // 假设 font-size: 16px, line-height: 1.5 → 每行高度 24px
  const lineHeightPx = 24;
  const collapsedHeight = lines * lineHeightPx;

  return (
    

      

        {children}
      
      {children.length > 100 && ( // 文字超过长度阈值时显示展开按钮
         setExpanded(!expanded)}
          className="mt-2 text-sm text-blue-600 hover:underline focus:outline-none"
          aria-expanded={expanded}
          aria-controls="collapsible-content"
        >
          {expanded ? '收起' : '展开全文'}
        
      )}
    

  );
}

? 使用方式（Next.js App Router 页面集成示例）

// app/page.tsx
import CollapsibleText from '@/components/CollapsibleText';

export default function HomePage() {
  const longText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`;

  return (
    

      
Product Description
      
        {longText}
      
    
  );
}

⚠️ 注意事项与优化建议（确保组件稳定可用）

• 行高一致性：组件所在容器务必固定 font-size 与 line-height（推荐使用 rem 或 px 单位），否则 max-height 计算会偏离预期；
• 无障碍友好：务必添加 aria-expanded 属性并使用语义化 元素（而非

  ），以提升屏幕阅读器兼容性；

• 性能优化：本组件依赖客户端状态（useState），因此在 Next.js App Router 中必须标记为 'use client'，避免在服务端渲染中直接执行；
• 平滑过渡增强：若需更自然的展开动画，可使用 height: auto 配合 getBoundingClientRect() 动态获取真实高度，实现逐帧过渡（进阶场景适用）；
• 移动端适配：可通过 window.innerWidth 在组件内动态调整 lines 值（例如屏幕宽度小于 768px 时显示 2 行，默认显示 3 行）。

这套方案轻量、稳定、零外部依赖，与 Next.js 现代 React 开发范式无缝契合，在视觉精度与用户体验之间达到了良好的平衡。如果你正在寻找一个即插即用的多行文本折叠组件，不妨直接采用此实现并加以微调。