Industry Leader in Digital Business

Howto: Implementing ‘text-overflow: ellipsis’ for FireFox using MooTools 1.3

Almost two years back, devongovett published a small JQuery plugin on his blog. The goal of this plugin was to allow developers to add the ‘text-overflow: ellipsis’ behavior to their websites in all browsers using JQuery. This CSS3 feature adds an extra option to the ‘text-overflow’ property that allows developers to automatically add three ending dots (e.g. ‘…’) to website content that is to large to fit their container. All browsers except FireFox support this new CSS3 feature and it was suspected that this feature would therefor be added to FireFox 3.1 (released June 30, 2009 under version number 3.5). Currently, I am running the most recent stable version of FireFox (being 3.6) and developers are still waiting for Mozilla to include this feature in their browser. For one of my current projects I also required the ‘text-overflow: ellipsis’ behavior so I rewrote the script from devongovett to work with MooTools 1.3. The script can be found below and works just like original script (demo can also be found there):

{code}(function($) {

Element.implement({

ellipsis: function(enableUpdating) {

var s = document.documentElement.style;
if (!(‘textOverflow’ in s || ‘OTextOverflow’ in s)) {

if (this.getStyle(“overflow”) == “hidden”) {

var t = this.clone(true).setStyles({
‘position’: ‘absolute’,
‘width’: ‘auto’,
‘max-width’: ‘inherit’,
‘overflow’: ‘visible’
}).inject(this, ‘after’);

var text = originalText = this.get(‘html’);
while (text.length > 0 && t.getSize().x > this.getSize().x) {

text = text.substr(0, text.length – 1);
t.set(‘html’, text + “u2026”);

}

this.set(‘html’, t.get(‘html’));
t.destroy();

if (enableUpdating == true) {

var oldW = this.getSize().x;
setInterval(function() {

if (this.getSize().x != oldW) {

oldW = this.getSize().x;
this.set(‘html’, originalText);
this.ellipsis();

}

}.bind(this), 200);

}

}

}

return this;

}

});

})();{/code}

Related Posts