当 <td 中有超过 3 行时如何显示图标>-解网

问：

当表格单元格中有超过 3 行文本时，我正在尝试在表格单元格中显示 SVG 图标。

此表正文的文本数据如下所示：

  const bodyData = [
    <>Cell 1</>,
    <>
      <ul>
        <li>Cell 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum ante eget massa rhoncus
      tincidunt.</li>
      </ul>
    </>,
    <>Cell 3</>,
    <>
      Cell 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum ante eget massa rhoncus
      tincidunt. Nullam vestibulum euismod justo, vitae bibendum enim auctor nec. Integer a lorem
      nec nibh tincidunt volutpat. Duis non consequat erat.
    </>,
  ];

它像这样映射这些数据：

     <tbody>
       <tr>
         {bodyData.map((text, index) => (
           <td>
             <Content>{text}</Content>
           </td>
         ))}
       </tr>
     </tbody>

我尝试过使用滚动高度和客户端高度调整大小观察器，如下所示：


useEffect(() => {
    const textElements = document.querySelectorAll('.text-container');
    if (textElements.length > 0) {
      resizeObserver.current = new ResizeObserver(entries => {
        entries.forEach(entry => {
          const truncated = entry.target.scrollHeight > entry.target.clientHeight;
           // How can I change this logic to detect if it's more than 3 lines...
          if (truncated) {
             // TODO: logic to display an icon
          }
        });
      });

      textElements.forEach(textElement => {
        resizeObserver.current?.observe(textElement);
      });
    }

    return () => {
      if (resizeObserver.current) {
        resizeObserver.current.disconnect();
      }
    };
  }, []);

这是错误的。我被困住了。我真的不知道如何检测每个表格单元格中的文本是否超过 3 行。

我之所以命名这个变量，是因为我还想在文本超过 3 行时截断文本。但是我发现它可以通过css（线夹）来实现。如果有人能帮我解决这个问题，我将不胜感激。谢谢。truncated

reactjs html-table 调整大小观察者

useEffect(() => {
  const textElements = document.querySelectorAll('.text-container');

  if (textElements.length > 0) {
    resizeObserver.current = new ResizeObserver(entries => {
      entries.forEach(entry => {
        const lineHeight = parseInt(window.getComputedStyle(entry.target).lineHeight);
        const numberOfLines = Math.floor(entry.target.clientHeight / lineHeight);

        // Check if the number of lines is greater than 3
        if (numberOfLines > 3) {
          // TODO: logic to display an icon
          console.log('More than 3 lines');
        }
      });
    });

    textElements.forEach(textElement => {
      resizeObserver.current?.observe(textElement);
    });
  }

  return () => {
    if (resizeObserver.current) {
      resizeObserver.current.disconnect();
    }
  };
}, []);

所以基本上我们是在计算字符存储的字符高度，然后将客户端高度除以字符高度来确定字符数。如果行数超过 3，则可以使用逻辑来显示图标。

注意：确保表格单元格中文本的行高相同，因为计算基于确切的行高值。

:)

当 <td 中有超过 3 行时如何显示图标>

How to display an icon when there are more than 3 lines in <td>

评论

评论

当 &lt;td 中有超过 3 行时如何显示图标&gt;

How to display an icon when there are more than 3 lines in <td>

评论

评论

当 <td 中有超过 3 行时如何显示图标>