http://snook.ca/archives/html_and_css/handling-overflow

dabblet.css

/*
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);
	}

}

dabblet.html

<div class="fadeout-text">Stockholm, Uppland, Sweden</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}