Javascript 如何在呈现到DOM之前知道div/span中的文本是否会溢出

我有一个

div

/

span

，它将被渲染到DOM中。我还在

div

中使用css样式，以隐藏溢出并显示省略号。在绘制div之前，我想知道是否发生了溢出。有办法找到它吗

我已经看到，通过比较

clientWidth

和

scrollWidth

我们可以知道是否发生了溢出，但这可以在元素渲染后计算出来。但是在渲染之前我需要它

反应代码：

<div className="element">
     <span>{this.props.name}</span>
</div>

document.getElementsByTagName（“span”）。clientWidth大于画布在下方宽度中给定的宽度

var c=document.getElementById（“myCanvas”）； var ctx=c.getContext（“2d”）； ctx.measureText（this.props.name）.width

---

有什么方法可以得到两个几乎相同的值。

方法在这里可能有用。我从来没有听说过。。。如果客户端在渲染过程中调整浏览器的大小？@abhishekkannojia没有画布元素，则此操作无效？我是否需要使用画布创建元素以使用此方法？是的，您需要创建一个虚拟

canvas

，然后在那里测量文本。这里的方法可能有用。我从没听说过。。。如果客户端在渲染过程中调整浏览器的大小？@abhishekkannojia没有画布元素，则此操作无效？我是否需要使用画布创建元素以使用此方法？是的，您需要创建一个虚拟

canvas

，然后在那里测量文本。

. element{
     overflow: hidden;
}

> span {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}