title: Block pointer events on child items when hidden by overflow: hidden?
body: <p>I have clickable items hidden by <code>overflow: hidden</code> and I don't want the user to click on the hidden items (thinking they're clicking the ellipsis to expand) because it will make changes the user probably doesn't want. Is there a way to block pointer-events on those items when they're hidden?</p>
  <p>In this snippet [fiddle], hover your mouse to the right of the ellipsis to see that the hover event is still sent through to hidden items. [https://jsfiddle.net/thebradness/25xy376d/23/]</p>
  <p>I've tried different combinations of the pointer-events property between the parent and children but they all apply the same way to children hidden and unhidden.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.item {
    padding: 3px;
    cursor: pointer;
    display: inline-block;
    border: 1px solid black;
  }
  
  .wrapper {
    width: 100px;
    height: 26px;
    border: 2px solid red;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="item"&gt;item1&lt;/div&gt;
    &lt;div class="item"&gt;item2&lt;/div&gt;
    &lt;div class="item"&gt;item3&lt;/div&gt;
    &lt;div class="item"&gt;item4&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>