Question

我选择有时会在其中有一个长字符串，有时它会被切断，在这种情况下我想在它们上面放一个工具提示但我不想显示工具提示，如果文本完全显示在select中

使用Angular对此进行验证吗？

Answer 1

来自：HTML text-overflow ellipsis detection

你可以试试这个：

function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}

Answer 2

好的，明白了。如果您使用的是香草选择，您可以尝试以下方法。完美地为我工作。关键是用<option>包裹<span>以获取文本实际像素宽度

HTML：

<select id="select" (change)="debug()" style="max-width:200px">
  <option>
    <span>
        Blalalalalalalalallalaalalalalalalalallaallalalalalaal
    </span>
  </option>
  <option>
    <span>
        Blalalallalalalalalalalalalallaal
    </span>
  </option>
  <option>
    <span>
        Blalalalalala
    </span>
  </option>
</select>

TS：

  debug() {
    const el = document.querySelector('#select');
    for (let i = 0; i < el['options'].length; i++) {
      if (this.isEllipsisActive(el['options'][i])) {
        console.log('cause offset', el['options'][i]);
      }
    }
  }
  isEllipsisActive(e) {
    if (e.children[0].scrollWidth > document.querySelector('#select').scrollWidth) {
      return true;
    }
    return false;
  }

Angular - 如何知道选择文本是否被切断？

2 个答案: