// source http://jsbin.com/lazagis

index.html

<style id="jsbin-css">
section {
  overflow: hidden;
  background-color: teal;
  height: calc(5 * 2.6ex);
  line-height: 2.6ex;
}
section p {
  float: right;
  margin: 0;
  margin-left: -1px;
  width: 100%;
}
section:before {
  content: "";
  float: left;
  outline: 1px solid green;
  width: 1px;
  height: 100%;
}
section:after {
  content: "…";
  background: rgba(255, 255, 255, 0.5);
  float: right;
  position: relative;
  text-align: right;
  left: 100%;
  box-sizing: border-box;
  top: -3ex;
  width: 3.5ex;
  margin-left: calc(1px - 3.5ex);
}
</style>
<section>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero omnis magnam deleniti, velit, ratione distinctio. Ex unde adipisci molestiae id aspernatur dolor, totam nulla aperiam in! Animi nulla, id? Laudantium.
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero omnis magnam deleniti, velit, ratione distinctio. Ex unde adipisci molestiae id aspernatur dolor, totam nulla aperiam in! Animi nulla, id? Laudantium.
	</p>
</section>

<script id="jsbin-source-css" type="text/css">section {
	overflow: hidden;
	background-color: teal;
	height: ~"calc(5 * 2.6ex)";
	line-height: 2.6ex;
	
	p {
		float: right;
		margin: 0;
		margin-left: -1px;
		width: 100%;
	}
	&:before {
		content: "";
		float: left;
		outline: 1px solid green;
		width: 1px;
		height: 100%;
	}
	&:after {
		content: "…";
		//background: linear-gradient(to right, rgba(255, 255, 255, 0), white 10%, white); 
		background: rgba(255,255,255, .5);
		float: right;
		position: relative; 
		text-align: right;
		left: 100%;
		box-sizing: border-box;
		top: -3.0ex;
		width: 3.5ex;
		margin-left: ~"calc(1px - 3.5ex)";
	}
}

</script>

jsbin.lazagis.css

section {
  overflow: hidden;
  background-color: teal;
  height: calc(5 * 2.6ex);
  line-height: 2.6ex;
}
section p {
  float: right;
  margin: 0;
  margin-left: -1px;
  width: 100%;
}
section:before {
  content: "";
  float: left;
  outline: 1px solid green;
  width: 1px;
  height: 100%;
}
section:after {
  content: "…";
  background: rgba(255, 255, 255, 0.5);
  float: right;
  position: relative;
  text-align: right;
  left: 100%;
  box-sizing: border-box;
  top: -3ex;
  width: 3.5ex;
  margin-left: calc(1px - 3.5ex);
}