Mootools Ellipsis Method


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. Element.implement({
  2. ellipsis: function() {
  3. if(this.getStyle("overflow") == "hidden") {
  4. var text = this.get('html');
  5. var multiline = this.hasClass('multiline');
  6. var t = this.clone()
  7. .setStyle('display', 'none')
  8. .setStyle('position', 'absolute')
  9. .setStyle('overflow', 'visible')
  10. .setStyle('width', multiline ? this.getSize().x : 'auto')
  11. .setStyle('height', multiline ? 'auto' : this.getSize().y)
  12. .inject(this, 'after');
  13.  
  14. function height() { return t.measure(t.getSize).y > this.getSize().y; };
  15. function width() { return t.measure(t.getSize().x > this.getSize().x; };
  16.  
  17. var func = multiline ? height.bind(this) : width.bind(this);
  18.  
  19. while (text.length > 0 && func()) {
  20. text = text.substr(0, text.lastIndexOf(' '));
  21. t.set('html', text + "...");
  22. }
  23.  
  24. this.set('html', t.get('html'));
  25. t.dispose();
  26. }
  27. }
  28. });

URL: // http://stackoverflow.com/questions/536814/javascript-insert-ellipsis-into-html-tag-if-content-too-wide

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.