Dynamically Updating Content Of FireFox Ellipsis Hack

Some time ago, Justin Maxwell wrote an article (String Truncation With Ellipsis) explaining a CSS-only solution for applying ellipsis to the text inside of an HTML element. Unfortunately, to this day, FireFox does not support an ellipsis CSS rule natively; an XML hack is required for it to work in FireFox. However, this hack prevents you from being able to update the content of the node in JavaScript using the innerHTML property. The value changes, but the UI does not update. Todays article will explain a technique for working around this problem.

How to do it…

var replaceEllipsis(node, content) {
	node.innerHTML = content;
	// use your favorite framework to detect the gecko browser
	if (YAHOO.env.ua.gecko) {
		var pnode = node.parentNode,
			newNode = node.cloneNode(true);
		pnode.replaceChild(newNode, node);

How it works…

The issue with the FireFox ellipsis hack is that it only applies the ellipsis to a nodes content when the node is first rendered in the page or newly added to the DOM. Simply updating the content or adding/removing the ellipsis class will not cause the browser to re-render the ellipsis. When updating the content of a node with the ellipsis class applied, it does not trigger the CSS rule that renders the ellipsis. Instead you have to create a new element to replace the existing one. The easiest way ensure perfect duplication of the node is by cloning it. Then simply replace the existing node with the clone node. This will trigger the CSS that powers the FireFox ellipsis hack (since this is the first time the cloned node is added to the DOM), applying the ellipsis to the updated content.

In non-gecko-based browsers we can assume that ellipsis is properly handled by the CSS, and thus simply update the innerHTML property.

Theres more…

You can follow the Mozilla bug 312156, which tracks the adding of the ellipsis value to the overflow property. There is a lot of outrage and frustration in the community, so I hope that it will be fixed in our lifetime.

See also