Flexbox and ellipsis

dabblet.css

/**
 * Flexbox and ellipsis
 */
ul {
  display: flex
  list-style: none;
  white-space: nowrap; /* Stops line wrapping */
}
li {
  overflow: hidden; /* Prevents overflow from expanding container */
  border: 1px solid #eee;
  text-overflow: ellipsis; /* needed on flexbox child */
}
a {
  display: inline; /* Must be inline to ellipsise */
  margin-right: 1em;
  font-size: 2em;
  text-decoration: none;
}

p {
margin: 2em;
border: 1px solid #eee;
padding: 2em;
}
p:hover {
color: red;
}

dabblet.html

<ul>
<li><a href="">OneOneOne</a>
<a href="">TwoTwoTwo</a>
<a href="">ThreeThreeThree</a>
<a href="">FourFourFour</a>
<a href="">Four Four Four</a></li>
</ul>

<p>test</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}