样式文本过长用...显示的时候，用弹框来显示文本（react为例）

限制了元素宽度，文本超出的时候用...结尾，鼠标划上效果做一个弹框来展示文本内容。但是文本未超出的时候不需要弹框。

react 无法计算文本宽度和元素宽度，需要操作DOM来计算

react获取DOM实例的方法

constructor(props) {

    super(props);

    this.textRef = React.createRef();

  }

<div ref={this.textRef} />

 

init = () => {

    const element = this.textRef; // this.textRef 是获取到的DOM实例

    if (element.current && element.current.scrollWidth > element.current.offsetWidth) {

      // 当这个条件为true的时候，说明文本长度已经超过元素宽度

    }

 }

 

注意事项：有时候element.current打印出来的值和实际取到的值不一样。这是因为浏览器完全加载完之后获取到的值才是准确的，可能浏览器还在加载过程中就已经去获取了，可以写一个定时器，推迟0.5秒去获取。