我如何知道 React 中的文本是否被截断以便显示工具提示？答案

【问题标题】：How do I know if text is truncated in React so that I can show a tooltip?我如何知道 React 中的文本是否被截断以便显示工具提示？
【发布时间】：2019-12-01 20:01:55
【问题描述】：

我有一个组件显示自定义工具提示，无论文本是否被截断。这是一个无状态组件。

const TitleComponent = ({ value }) => {

  const name = value.name;

  return(
   <div className="header">
     <span className="area">
       <Tooltip 
         value={name} 
         position={Position.bottom}>
            <span className="truncate headerTruncate">
               {name}
            </span>
       </Tooltip>
     </span>
    </div>
 );
};

所以文本被 'trancate' CSS 类截断。而且我想要一种仅在文本被截断时显示工具提示的方法。我怎么知道代码中的文本是否被截断？

【问题讨论】：

如果被CSS截断了？你无法从 JS 中看出这一点（除非，正如我前几天看到的一个插件那样，你将文本渲染到一个隐藏的画布中，看看它是否比你放入的元素大......） .
Calculate text width with JavaScript 的可能重复项。如果您需要知道它是否被截断，请计算文本的大小和容器的大小。如果它太小，则将工具提示的display 值调整为本质上不是none

标签： reactjs ecmascript-6 react-redux

【解决方案1】：

这发生在我身上，所以我创建了一个动态画布，放入文本并获得画布的宽度。然后我获取父元素的宽度并进行比较，然后使用 CSS 类进行处理。希望这会有所帮助。

【讨论】：

你能详细说明一下吗:) 我的问题需要这个！！