Return to Snippet

Revision: 38676
at January 6, 2011 05:31 by iloveitaly


Initial Code
Element.implement({
	ellipsis: function() {
		if(this.getStyle("overflow") == "hidden") {
			var text = this.get('html');
			var multiline = this.hasClass('multiline');
			var t = this.clone()
				.setStyle('display', 'none')
				.setStyle('position', 'absolute')
				.setStyle('overflow', 'visible')
				.setStyle('width', multiline ? this.getSize().x : 'auto')
				.setStyle('height', multiline ? 'auto' : this.getSize().y)
				.inject(this, 'after');

			function height() { return t.measure(t.getSize).y > this.getSize().y; };
			function width() { return t.measure(t.getSize().x > this.getSize().x; };

			var func = multiline ? height.bind(this) : width.bind(this);

			while (text.length > 0 && func()) {
				text = text.substr(0, text.lastIndexOf(' '));
				t.set('html', text + "...");
			}

			this.set('html', t.get('html'));
			t.dispose();
		}
	}
});

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

Initial Description


Initial Title
Mootools Ellipsis Method

Initial Tags


Initial Language
JavaScript