省略号加宽度动画会产生颤抖

Question

在最近实施新标签组件的过程中，遇到了一个我从未见过的问题。

此标签组件必须在休止符上显示第一个字母。如果标签被悬停，则宽度将增加动画效果以显示全文。如果最后的全文太长，则应将其剪掉。

问题是当标签悬停时，省略号计算+宽度动画+ innerText更改会产生可怕的颤抖。

这里是示例代码，只需将标签组件悬停即可。

注意：：在此示例中，我正在使用自定义元素功能，请确保您使用的是兼容的浏览器。

class LabelComponent extends HTMLElement {
  short = 'A';
  long = 'A very long item name';
  _eventSet = new Set();
  constructor() {
    super();
    this.innerText = this.short;
    this._eventSet.add({
      trigger: 'mouseenter',
      callback: () => {
        this.innerText = this.long;
      }
    });
    this._eventSet.add({
      trigger: 'mouseleave',
      callback: () => {
        this.innerText = this.short;
      }
    });
  }

  _registerEvents() {
    this._unRegisterEvents();
    for (let eventItem of this._eventSet) {
      this.addEventListener(eventItem.trigger, eventItem.callback);
    }
  }

  _unRegisterEvents() {
    for (let eventItem of this._eventSet) {
      this.removeEventListener(eventItem.trigger, eventItem.callback);
    }
  }

  connectedCallback() {
    this._registerEvents();
  }

  disconnectedCallback() {
    this._unRegisterEvents();
  }
}


customElements.define('label-component', LabelComponent);

label-component {
  display: block;
  width: 20px;
  height: 20px;
  background: orange;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.35s ease;
  border-radius: 3px;
}

label-component:hover {
  width: 120px;
}

<label-component></label-component>

对解决此问题有什么想法吗？