Multi-Line Ellipsis

ellipsis.scss

// http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

@mixin multiline-ellipsis($height, $lineheight, $ellipsiswidth) {

$ellipsiswidth: 3em !default;

	.ellipsis {
		overflow: hidden;
		height: $height;
		line-height: $lineheight; }

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

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

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

		float: right; position: relative;
		top: -25px; left: 100%; 
		width: $ellipsiswidth; margin-left: -$ellipsiswidth;
		padding-right: 5px;
		
		text-align: right;
		background: white;
		background: -webkit-gradient(linear, left top, right top,
				from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
			background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);			
			background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
			background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
			background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white)
	}
	
	// Customize expand behaviour
	.ellipsis a {
	  position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-indent: -9999px;
    z-index: 100;
  }
  .ellipsis i, .ellipsis:after {
    font-style: normal;
    color: #de5535;
  }
  
  .ellipsis i:before { content: "Collpase";}
  .ellipsis-expand-hide i:before {
      display: none;
  }

	// Toggle read more
	.ellipsis-expand:before {
		height: auto;
	}

}

expand.js

var $ellipsis = $('.ellipsis');

$('#readmore').on('click', function() {
    var height = $ellipsis.height();
    
    // 100 = $height in scss
    if (height > 100) {
        // Collapse
        $ellipsis.height(100).removeClass('ellipsis-expand');
    }
    else {
        // Expand
        $ellipsis.height('auto').addClass('ellipsis-expand');
    }
});

Multi-Line Ellipsis.html

<div class="ellipsis">
    <div>
        <p>
            content text here
            <i></i>
        </p>
    </div>
    <a id="readmore" href="#">Read More</a>
</div>