如何检测textContent何时溢出其父级

Question

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

问题： 是否有任何简洁/巧妙的方法来检测textContent何时溢出其父级？

Codepen Example

更新：看起来这样可以解决我的问题。

HTML：

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

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

CSS：

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

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

JS：

document.querySelectorAll(‘.thoseElements:nth-child(even)’)
  .forEach(function (el) {
    el.style.display = ‘none’;
  });

正常：

触发：

注意： 我不能依赖滚动条。 （更新的sorta使用滚动条）

Answer 1

受我在评论中提供给您的链接的启发，这是一个有效的片段：

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我希望它有所帮助！

Answer 2

不确定这是多么可靠，而且它的布局颠簸，但它对我有用：

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