Skip to content

Instantly share code, notes, and snippets.

@oli oli/dabblet.css
Created Sep 2, 2015

What would you like to do?
Flexbox and ellipsis
* 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;
<li><a href="">OneOneOne</a>
<a href="">TwoTwoTwo</a>
<a href="">ThreeThreeThree</a>
<a href="">FourFourFour</a>
<a href="">Four Four Four</a></li>
// alert('Hello world!');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.