Skip to content

Instantly share code, notes, and snippets.

@yagopv
Created August 29, 2013 11:42
Show Gist options
  • Select an option

  • Save yagopv/6377028 to your computer and use it in GitHub Desktop.

Select an option

Save yagopv/6377028 to your computer and use it in GitHub Desktop.
Ensure ellipsis
.ellipsis {
overflow: hidden;
height: 100px;
line-height: 25px;
}
.ellipsis:before {
content:"";
float: left;
width: 5px;
height: 100px; }
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
<div class="ellipsis">
<div>
<p>Text</p>
</div>
</div>
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right; position: relative;
top: -25px; left: 100%;
width: 3em; margin-left: -3em;
padding-right: 5px;
text-align: right;
background: -webkit-gradient(linear, left top, right top,
from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment