angular-multiline-ellipsis

AngularJS directive for ellipsis multi line text using pure CSS

Getting Started

Install

bower install angular-multiline-ellipsis 

After running Grunt you should see following insertions in your index page:

in <!-- bower:js --> section
<script src="../bower_components/angular-multiline-ellipsis/dist/multiline-ellipsis.min.js"></script>

in <!-- bower:css --> section
<link rel="stylesheet" href="/../bower_components/angular-multiline-ellipsis/dist/multiline-ellipsis.min.css" />

Add the reference in your app.js

angular.module('myApp', [
	...
	'TT.multiLineEllipsis'
])

Params

lines - Optional. How many lines to be visible. Defaults to 3.

height - Optional. Height of the element. Defaults to 75(px).

lineHeight - Optional. Text line height. Defaults to 25(px).

If 'lines' is set at least one of the other OPTIONAL params need to accompany it.

Examples

Default (height = 75px, lineHeight = 25px, lines = 3)

<div multi-line-ellipsis >
   Only two things are infinite, the universe and human stupidity, 
   and I'm not sure about the former.
   
   -- A. Einstein
</div>

Tipical

<div multi-line-ellipsis='{"height" : "75", "lines" : "3" }' >
   Only two things are infinite, the universe and human stupidity, 
   and I'm not sure about the former.
   
   -- A. Einstein
</div>

Full

<div multi-line-ellipsis='{"height" : "75", "lineHeight" : "25", "lines" : "3" }' >
   Only two things are infinite, the universe and human stupidity, 
   and I'm not sure about the former.
   
   -- A. Einstein
</div>

Credits

Many thanks to Mobify http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ for the clever CSS