尝试使用React将文本拆分为两行

import React, { useState } from 'react';

const TextSplitter = ({ text }) => {
  const [originalText, setOriginalText] = useState(text);
  const [splitText, setSplitText] = useState('');

  const splitTextHandler = () => {
    // 计算文本长度是否超过两行
    const container = document.createElement('div');
    container.style.width = '100%';
    container.style.maxHeight = '2.8em'; // 设置两行文本的高度

    const span = document.createElement('span');
    span.textContent = originalText;
    container.appendChild(span);
    document.body.appendChild(container);

    if (span.offsetHeight > container.offsetHeight) {
      // 文本超过两行时进行拆分
      const words = originalText.split(' ');
      let firstLine = '';
      let secondLine = '';

      for (let i = 0; i < words.length; i++) {
        if (
          container.offsetHeight < span.offsetHeight ||
          secondLine === ''
        ) {
          // 将单词添加到第一行或第二行
          firstLine += `${words[i]} `;
        } else {
          secondLine += `${words[i]} `;
        }

        // 更新拆分后的文本
        setSplitText(`${firstLine.trim()}\n${secondLine.trim()}`);
      }
    } else {
      // 文本未超过两行时不进行拆分
      setSplitText(originalText);
    }

    // 移除临时元素
    document.body.removeChild(container);
  };

  return (
    <div>
      <button onClick={splitTextHandler}>拆分文本</button>
      <div>{splitText}</div>
    </div>
  );
};

export default TextSplitter;