Skip to content

Instantly share code, notes, and snippets.

@avaly
Forked from teddyzetterlund/dabblet.css
Created June 30, 2012 21:04
Show Gist options
  • Save avaly/3025505 to your computer and use it in GitHub Desktop.
Save avaly/3025505 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/
Tested in:
// Uses fade
- Safari 5.1.7
- Chrome 19
- Opera 12
- Firefox 12
- IE 9
// Uses ellipsis
- IE 8
- IE 7
// Use neither? (Maybe min-width should be added to the media query.)
- iOS 5.1.1 (iPhone 4S)
*/
.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