/**
 * 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;
}