React中CSS截断文本后获取p标签可见字符数及控制展开按钮

核心思路 #

CSS文本截断只是视觉层面的隐藏，DOM中仍保留完整文本，因此无法通过innerText判断是否截断。可靠的方法是对比元素的scrollHeight和clientHeight：

• scrollHeight：元素内容的总高度（包含溢出隐藏的部分）
• clientHeight：元素可见区域的高度
  当scrollHeight > clientHeight时，说明文本存在溢出，需要显示展开/收起按钮。

具体实现代码 #

修改你的组件，加入DOM元素引用、溢出判断逻辑，控制按钮的显示：

import { useReducer, useRef, useEffect, useState } from 'react';
import styled from 'styled-components';

const TruncatableText = styled("p", {
  display: "-webkit-box",
  WebkitBoxOrient: "vertical",
  WebkitLineClamp: 2,
  lineHeight: 1.5,
  maxHeight: "3em",
  overflow: "hidden",
  textOverflow: "ellipsis",
  cursor: "pointer",
  width: "100%",

  variants: {
    showFull: {
      true: {
        WebkitLineClamp: 1000,
        maxHeight: "100%",
      },
    },
  },
});

const Button = styled.button`
  margin-top: 8px;
  // 可添加自定义按钮样式
`;

export default function TruncatableTextComponent({ text }) {
  const [showFull, toggleShowFull] = useReducer((s) => !s, false);
  const [shouldShowButton, setShouldShowButton] = useState(false);
  const textRef = useRef(null);

  useEffect(() => {
    const checkOverflow = () => {
      if (!textRef.current) return;

      // 文本展开时，始终显示隐藏按钮
      if (showFull) {
        setShouldShowButton(true);
        return;
      }

      // 截断状态下，判断是否溢出
      const isOverflowing = textRef.current.scrollHeight > textRef.current.clientHeight;
      setShouldShowButton(isOverflowing);
    };

    checkOverflow();
    // 监听窗口大小变化，避免布局改变导致判断失效
    window.addEventListener('resize', checkOverflow);
    return () => window.removeEventListener('resize', checkOverflow);
  }, [text, showFull]); // 文本内容或展开状态变化时重新判断

  return (
    <>
      <TruncatableText ref={textRef} showFull={showFull}>
        {text}
      </TruncatableText>

      {shouldShowButton && (
        <Button onClick={toggleShowFull}>
          {showFull ? "Hide Full Text" : "Show Full Text"}
        </Button>
      )}
    </>
  );
}

关键细节说明 #

• ref的使用：通过useRef获取TruncatableText对应的DOM元素，用于读取高度属性。
• 监听依赖：useEffect的依赖数组包含text和showFull，确保文本内容变化或展开状态切换时，重新判断是否溢出。
• 窗口resize监听：容器宽度变化会影响文本换行，进而改变溢出状态，因此需要监听窗口大小变化并重新判断。
• 展开状态处理：当文本展开时，无论长度如何都显示隐藏按钮，保证用户可以收起文本。

关于“获取可见字符数”的补充 #

如果确实需要获取可见字符数，这种方法非常复杂（涉及字体大小、行高、容器宽度、字符宽度差异等因素），实际开发中很少用到。通过高度判断溢出的方法已经足够满足“按需显示按钮”的需求，是更简洁可靠的方案。

内容的提问来源于stack exchange，提问作者Shakirul Hasan