Skip to content

Instantly share code, notes, and snippets.

@pavelbier
Forked from teddyzetterlund/dabblet.css
Created June 27, 2012 22:35
Show Gist options
  • Save pavelbier/3007332 to your computer and use it in GitHub Desktop.
Save pavelbier/3007332 to your computer and use it in GitHub Desktop.
/*
http://snook.ca/archives/html_and_css/handling-overflow
http://www.456bereastreet.com/archive/201206/using_media_queries_to_hide_css3_from_older_browsers/
*/
.fadeout-text {
overflow: hidden;
width: 130px;
/* Fallback solution for browsers that
doesn't support the next set of rules. */
text-overflow: ellipsis;
white-space: nowrap;
}
@media only screen {
.fadeout-text {
text-overflow: clip;
position: relative;
}
.fadeout-text::after {
content: "";
position: absolute;
top: 0; bottom: 0; right: 0;
width: 20px;
background-image: linear-gradient(left,rgba(255, 255, 255, 0),white);
}
}
<div class="fadeout-text">Stockholm, Uppland, Sweden</div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment