Fake ellipsis

by microbians

HTML

Basado en:<br/>
http://codepen.io/romanrudenko/pen/ymHFh

<div class="ellipsis">
  <p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little an to get to sea as soon as I can.</p>
</div>

CSS

html, body, p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
	line-height: 25px;
	margin: 20px;
}

.ellipsis:before {
	content:"";
	float: left;
	width: 5px; height: 200px; }

.ellipsis > *:first-child {
	float: right;
	width: 100%;
	margin-left: -5px; 
}		

.ellipsis:after {
	content: "\02026";  

    font-size: 1.2em;
    
	box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;

	float: right;
    position: relative;
	top: -1.5em;
    left: 100%; 
	width: 15em; margin-left: -15em;
	padding-right: 5px;
	
	text-align: right;

	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8) 50%, white 90%,white);



}

JavaScript

// We change the content of the :after generated element to use an actual ellipsis and apply a transparent-to-white gradient background to hide any text it overlays. Debugging-specific properties, such as background highlighting and semi-transparency are now removed and we arrive at our final result.