首页 > 编程语言 >Next.js 实现多行文本折叠与展开功能

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

来源：互联网 2026-07-02 08:08:06

本文介绍一种纯 CSS + React 状态驱动的多行文本折叠方案，无需第三方库，兼容 Next.js，支持按行数精确截断并显示“Read more”按钮，点击后平滑展开全文。多行文本折叠是内容展示型页面中常见的需求，产品描述、文章摘要、评论区预览等场景都需要优雅的截断方式。传统 text-ove

本文介绍一种纯 CSS + React 状态驱动的多行文本折叠方案，无需第三方库，兼容 Next.js，支持按行数精确截断并显示“Read more”按钮，点击后平滑展开全文。

多行文本折叠是内容展示型页面中常见的需求，产品描述、文章摘要、评论区预览等场景都需要优雅的截断方式。传统 text-overflow: ellipsis 仅支持单行，多行场景下无法胜任。依赖第三方库又可能带来包体积和 SSR 兼容性问题，尤其在 Next.js 这类框架中，自行实现更轻量、可控。

核心思路清晰：利用 max-height 配合 overflow: hidden 模拟截断，通过 CSS 过渡实现平滑展开效果。行数控制依赖固定行高换算高度——只要字体大小和行高稳定，计算即可精准。下面是一个可复用的组件实现。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

推荐实现：基于高度控制的响应式折叠组件

// 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);

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

  return (
    
      
        {children}
      
      {children.length > 100 && ( // 简单长度阈值判断是否需要折叠
        
      )}
    
  );
}

使用方式（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}
      
    
  );
}

注意事项与优化建议

行高一致性：确保 .collapsible_text 所在元素的 font-size 和 line-height 固定（推荐使用 rem 或 px），否则 max-height 计算会失准；
无障碍友好：添加 aria-expanded 和语义化
性能优化：避免在服务端渲染（SSR）中使用 useState —— 此组件需标记为 'use client'；
平滑过渡增强：若需更自然的展开动画，可配合 height: auto + getBoundingClientRect() 动态计算目标高度（进阶场景）；
移动端适配：可通过媒体查询动态调整 lines 值（如 lines={window.innerWidth < 768 2 : 3}）。

该方案轻量、稳定、无外部依赖，完全贴合 Next.js 的现代 React 开发范式，在视觉精度与用户体验之间取得平衡。若您正在寻找类似功能，可直接用于项目。

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述