如何在 Next.js 中实现多行文本折叠与“展开/收起”交互-java教程-PHP中文网

本文介绍在 next.js 项目中优雅实现多行文本自动截断（按行数而非字符数），点击“read more”展开全文，并支持收起，兼顾可访问性与视觉一致性。

本文介绍在 next.js 项目中优雅实现多行文本自动截断（按行数而非字符数），点击“read more”展开全文，并支持收起，兼顾可访问性与视觉一致性。

在实际开发中，卡片类组件常需展示摘要文本（如新闻、产品描述），但受限于布局空间，必须控制显示行数——关键需求是“按指定行数截断”，而非简单限制字符或字数。CSS 原生不支持 line-clamp 在所有场景下可靠工作（尤其配合 Flex/Grid 或动态字体时），因此推荐结合 CSS max-height + JS 状态控制的稳健方案。

以下是一个生产就绪的 CollapsibleText 组件示例（适用于 Next.js App Router）：

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

import { useState, useEffect } 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);
  const [isClamped, setIsClamped] = useState(true);

  // 动态计算每行高度并设置 max-height（兼容不同字体/字号）
  useEffect(() => {
    const el = document.querySelector<htmlelement>('.collapsible-text');
    if (!el) return;

    const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 1.5;
    const fontSize = parseFloat(getComputedStyle(el).fontSize) || 16;
    const baseHeight = lineHeight * fontSize;
    const maxHeight = expanded ? 'none' : `${baseHeight * lines}px`;

    el.style.maxHeight = maxHeight;
    setIsClamped(!expanded && el.scrollHeight > el.clientHeight);
  }, [expanded, lines]);

  return (
    <div classname="flex flex-col">
      <p classname="{`collapsible-text" transition-all duration-300 ease-in-out style="{{" overflow:>
        {children}
      </p>
      {isClamped && (
        <button type="button" onclick="{()"> setExpanded(!expanded)}
          className="mt-2 text-blue-600 hover:underline text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-300 rounded"
          aria-expanded={expanded}
          aria-controls="collapsible-content"
        >
          {expanded ? 'Read less' : 'Read more'}
        </button>
      )}
    </div>
  );
}</htmlelement>

✅ 使用方式：

React Orchestrator

基于 ReAct 框架的双系统 AI 协调器，自动评估任务复杂度，智能切换快速执行与深度推理模式，支持多工具协作。

下载

// 在页面中
import CollapsibleText from '@/components/CollapsibleText';

export default function HomePage() {
  return (
    <article classname="max-w-2xl mx-auto p-4"><collapsibletext lines="{2}">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
      </collapsibletext></article>
  );
}

⚠️ 注意事项：