Skip to content

Instantly share code, notes, and snippets.

@AshCoolman
Created July 30, 2014 15:16
Show Gist options
  • Save AshCoolman/7319c90d14e84a7fcf86 to your computer and use it in GitHub Desktop.
Save AshCoolman/7319c90d14e84a7fcf86 to your computer and use it in GitHub Desktop.
A Pen by Ashley Coleman.
<ol>
<li>
<span>A long sentence must be hidden</span>
<span>that must be inline-block</span>
</li>
<li>
<span>Cras dignissim cursus nibh. Curabitur.</span>
<span>In hac habitasse platea dictumst.</span>
</li>
</ol>
ol {
width: 250px;
}
li {
width: 100%;
background-color:cyan;
span {
vertical-align:bottom;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 50%;
background-color:yellow;
}
span:hover {
display: inline-block;
overflow: visible;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
background-color:salmon;
position:absolute;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment