计算是否换行

maxWidth

.wrap {
  border: 1px solid red;
  display: flex;
  max-width: 200px;
}
.text {
  border: 1px solid blue;
  flex: 0 0 auto;
}

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

const Demo = () => {
  useEffect(() => {
    if (lineRef.current) {
      const lineDom = lineRef.current;
      const lineChildDom = lineDom.childNodes[0];

      if (lineChildDom.clientWidth > lineDom.clientWidth) {
        // '换行'
        lineChildDom.style.maxWidth = `${lineDom.clientWidth}px`;
      }
    }
  }, [lineRef]);

  return (
    <div className={styles.wrap} ref={lineRef}>
      <div className={styles.text}>测试换行测试换行测试换行</div>
    </div>
  );
};

参考

• js 如何判断文本内容是否换行了
• 如何判断一个元素文本是否换行？