angular-ellipsisAngular directive to truncate multi-line text to visible height. The end of the visible text is appended with an ellipsis, optional text, and optional click callback function.
To use, copy src/angular-ellipsis.js to your project and rename the included module (which is set to 'exampleApp' at the bottom) to your own module.
bower install hn-angular-ellipsis
npm install angular-ellipsis
We forked this repo to fix bad bower dependencies and also to registered it on bower.
DEMOAngular Ellipsis Directive demo page
- Truncates multi-line text (no HTML)
- On any window resize, truncation and ellipsis will be recalcuated
- Text will only be truncated if there is overflow, otherwise it will display as normal
- Custom ellipsis append text will live-update (if a $scope variable is used)
- Select an HTML element that has a CSS height or max-height value set (max-height will take precedence)
- Use ng-bind on the element to include text to truncate
- Add the ellipsis/data-ellipsis directive to the element
- Text will be truncated to visible area, and an ellipsis (...) will be added to the end
<p data-ng-bind="paragraphText" data-ellipsis></p>`
- Custom Ellipsis Symbol
<p data-ng-bind="paragraphText" data-ellipsis data-ellipsis-symbol="--"></p>`
<p data-ng-bind="paragraphText" data-ellipsis data-ellipsis-append="read more" data-ellipsis-symbol="--"></p>`
- Custom Append Text
<p data-ng-bind="paragraphText" data-ellipsis data-ellipsis-append="read more"></p>`
<p data-ng-bind="paragraphText" data-ellipsis data-ellipsis-append="scope.appendString"></p>`
- Custom Append Text Click Function
<p data-ng-bind="paragraphText" data-ellipsis data-ellipsis-append="read more" data-ellipsis-append-click="onClickFunction()"></p>`
COMPATIBILITYWorks on modern web browers, which includes any relatively recent version of Chrome, Firefox, Safari, and IE 9+. Although there is no formally-maintained list, mobile device support is quite thorough. I will update cross-browser and device issues if they are entered as issues.
- To make the plugin work in non-modern versions of Internet Explorer, be sure to review the Angular Internet Explorer Compatibility page. This StackOverflow question regarding the Angular $sce service addresses an issue with the ng-bind directive.
One suggested use case for < IE 8 implementation is to maintain an additional non-truncated element with overflow set to hidden. Using IE conditional CSS, the truncated element can be displayed to IE 8 and above, and the non-truncated version to < IE 8.
- Add option to execute passed function on append click
- Basic option to use a show more/show less functionality for append