React中如何获取设置word-wrap: break-word的元素内自动换行的文本行数

实现原理 #

利用DOM元素的scrollHeight（元素内容的实际总高度）除以单行文本的行高，就能得到文本自动折行后的实际行数，不需要统计内部子元素数量，也适配word-wrap: break-word强制折行的场景。

完整实现代码 #

import "./styles.css";
import React, { useEffect, useRef, useState } from "react";

const App = () => {
  const text =
    "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
  // 给目标文本容器绑定ref
  const textContainerRef = useRef(null);
  const [lineCount, setLineCount] = useState(0);

  useEffect(() => {
    const calcLineCount = () => {
      const container = textContainerRef.current;
      if (!container) return;
      // 拿到容器计算后的样式
      const computedStyle = window.getComputedStyle(container);
      // 提取行高，转成数值
      const lineHeight = parseFloat(computedStyle.lineHeight);
      // 提取上下内边距
      const paddingTop = parseFloat(computedStyle.paddingTop);
      const paddingBottom = parseFloat(computedStyle.paddingBottom);
      // 实际内容总高度 = scrollHeight - 上下内边距
      const contentHeight = container.scrollHeight - paddingTop - paddingBottom;
      // 计算行数，四舍五入取整
      const count = Math.round(contentHeight / lineHeight);
      setLineCount(count);
      console.log('实际行数：', count);
    }
    // 组件挂载/内容变化时执行计算
    calcLineCount();
    // 如果容器宽度会跟随窗口大小变化，可加resize监听
    window.addEventListener('resize', calcLineCount);
    return () => window.removeEventListener('resize', calcLineCount);
  }, [text]); // 文本内容变化时重新计算

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>当前文本实际行数：{lineCount}</h2>
      <div
        ref={textContainerRef}
        style={{
          width: "150px",
          textOverflow: "ellipsis",
          overflow: "hidden",
          wordWrap: "break-word"
        }}
      >
        <p>
          {text.split("\n").map((text, i) => (
            <React.Fragment key={i}>
              {text}
              <br />
            </React.Fragment>
          ))}
        </p>
      </div>
    </div>
  );
};

export default App;

注意事项 #

• 计算操作要放在useEffect中执行，确保DOM已经渲染完成，避免拿到未就绪的错误尺寸
• 如果容器宽度会跟随窗口大小变化，需要监听resize事件重新计算行数
• 如果你的文本内容会动态更新，记得把文本变量加入useEffect的依赖数组，内容变化时自动重新统计

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