Need help with angular-ellipsis?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

dibari
124 Stars 101 Forks MIT License 111 Commits 33 Opened issues

Description

Angular directive to truncate multi-line text to visible height

Services available

!
?

Need anything else?

Contributors list

# 420,899
Objecti...
C#
16 commits
# 169,126
PHP
twitter...
laravel...
laravel...
13 commits
# 555,630
HTML
JavaScr...
6 commits
# 233,201
gcm
bot-fra...
restful...
CSS
5 commits
# 150,147
HTML
apns2
Rails
macOS
3 commits
# 626,213
HTML
JavaScr...
3 commits
# 427,710
npm
HTML
Vue.js
vuejs
2 commits
# 398,282
Shell
PHP
ingress
Android
2 commits
# 225,881
JavaScr...
HTML
ponyfil...
xmlhttp...
2 commits
# 70,771
TypeScr...
nodejs-...
node
nest
2 commits
# 60,491
PHP
Compose...
Laravel
hls-liv...
2 commits
# 606,096
JavaScr...
HTML
2 commits
# 205,315
PHP
Shell
React
google-...
2 commits
# 306,997
Less
HTML
Angular
slider-...
1 commit
# 128,733
HTML
node
sentry
Go
1 commit
# 696,306
HTML
JavaScr...
1 commit
# 58,081
coffees...
node-js
XML
Express
1 commit

angular-ellipsis

Angular 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.

Or, to install via Bower:

javascript
bower install angular-ellipsis
and then inject into your app:
javascript
var myApp = angular.module('myApp', ['dibari.angular-ellipsis']);

DEMO

Angular Ellipsis Directive demo page

FEATURES

  • 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)

BASIC USAGE

  1. Select an HTML element that has a CSS height or max-height value set (max-height will take precedence)
  2. Use ng-bind on the element to include text to truncate
  3. Add the ellipsis/data-ellipsis directive to the element
  4. Text will be truncated to visible area, and an ellipsis (...) will be added to the end

Simple example

OPTIONS

  • Custom Ellipsis Symbol
    A custom ellipsis string can be used. If this value is set, it will replace the default ellipsis (...). This value will be appended at the end of the truncated text, before a custom append (if included). Example:


  • Custom Append Text
    You can include a custom string after the ellipsis by setting the attribute ellipsis-append/data-ellipsis-append on the element. This value may be bound to a scope variable instead of just being a static string. If a scope value is used, the direcive will update the appended text on its update. Only text may be used, not HTML. When rendered in the truncated text, this custom string wrapped in a span tag, and can be styled through CSS as usual. Examples:


  • Custom Append Text Click Function
    If a custom append string is included, a function can be executed on the resulting span tag's click. The function must exist within the controller's scope. If an ellipsis append string is not included, the function will not execute (since it has no element to bind to). Example:

  • Custom String Separator You can use string separator to split the string by something else than " " (space). Example (split by characters):

  • Fallback Font-Size You can specify a fallback font size. If text is detected to overflow an attempt to resize the text to the fallback font-size will be made before ellipsis are added.

COMPATIBILITY

Works 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.

TODO's

  • Add option to execute passed function on append click
  • Basic option to use a show more/show less functionality for append

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.