Overflow: hidden; doesn't clip anchors (they still clickable)

by Konstantin Rouda

HTML

<nav class="c-nav">
  <p class="o-menu">
    Some text before links
      <a href="https://www.w3.org/TR/CSS2/visufx.html#overflow">First Link</a>
      <a href="https://www.w3.org/TR/CSS2/visufx.html#propdef-visibility">Second Link</a>
      <a href="https://www.w3.org/TR/CSS2/visufx.html">Third Link</a>
  </p>
</nav>

CSS

HTML {
  box-sizing: border-box;
  font-size: 110%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

.c-nav {
  border: 1px solid;
}

.o-menu {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

JavaScript

/*
Note: BUG can be reproduced in Chrome, FF.
IE11 doesn't have this BUG
*/
/*
Steps to reproduce this BUG:
1. Resize preview window in order to see ellipsis.
2. Hover over ellipsis (the space between right border and the last ellipse) with your mouse pointer (it should get cursor: pointer;)
3. You should be able to click on link.
*/