Skip to content

Instantly share code, notes, and snippets.

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

Embed
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;
}
<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>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
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.