AngularJS directive for ellipsis multi line text using pure CSS
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'
])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.
<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><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><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>Many thanks to Mobify http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ for the clever CSS