如何检测textContent是否溢出其父元素

Question

需求：
我需要一个触发器，当按钮的textContent超出了按钮宽度时触发。

问题：
有没有一种简洁/聪明的方法来检测textContent是否溢出其父元素？

Codepen示例

更新：看起来这将解决我的问题。

HTML：

<div class="container">
   <button>a normal button</button>
   <button>tiny</button>
   <button class="parent">
     <div class="child">a rhhh, really wide button lskdfjlasdkfj lksjd flaksjd flaskdjf lkj</div>
   </button>
</div>

CSS：

.container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;

  grid-column-gap: 20px;
}
.parent {
    overflow: hidden;
}
button {
  white-space: nowrap;
}

JS:

const child = document.querySelector('.child');
console.log(child.scrollWidth, 'child');

const parent = document.querySelector('.parent');
console.log(parent.clientWidth,'parent');

普通:

触发器:

注意: 我不能依赖滚动条。(更新：有点使用滚动条)

- Armeen Moon

---

再次相同的代码 :p 你想在调整大小时检测它吗？ - Temani Afif

也许这些链接会有所帮助：https://www.google.com/search?q=detect+overflow+with+js+site:stackoverflow.com&sa=X&ved=0ahUKEwjXx7bW7uTaAhVMalAKHeaqD9oQrQIIMSgEMAA&biw=1600&bih=794 - Temani Afif

我找到了一个可能有所帮助的主题：https://dev59.com/RGw15IYBdhLWcg3wxukh - Takit Isy

Answer 1

受我在评论中提供的链接启发，这里有一个可用的代码片段：

$("button").each(function() {
  if ($(this)[0].scrollWidth > $(this).innerWidth()) {
    console.log("Overflow!");
  } else {
    console.log("It's ok.");
  }
});

.container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 20px;
}

button {
  white-space: nowrap;
  /* Added for test */
  width: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button>a normal button</button>
  <button>tiny</button>
  <button>a rhhh, really wide button</button>
</div>

我希望它有所帮助！

- Takit Isy

Answer 2

不确定这是否可靠，而且它会导致布局抖动，但对我有用：

function isButtonOverflowing ( button ) {
    var oldHeight = button.offsetHeight;
    button.style.whiteSpace = 'normal';
    var newHeight = button.offsetHeight;
    button.style.whiteSpace = '';
    return oldHeight !== newHeight;
}

- Ben West