How Can I Truncate Long Strings with CSS and Display an Ellipsis Across Browsers?

Truncating Long Strings with CSS: A Cross-Browser Solution

Truncating dynamic text to fit within fixed layouts can be a challenge. No native CSS property provides cross-browser support for truncating text and displaying an ellipsis. However, creative workarounds can achieve this functionality.

Justin Maxwell's Ellipsis Technique

Justin Maxwell developed a CSS solution that works across browsers, but it has one limitation: it does not allow text selection in Firefox.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

The ellipsis.xml file contains an XBL markup that implements the ellipsis functionality.

Updating Node Content

In Firefox, updating the content of a node using innerHTML can break the ellipsis functionality. To address this, use the following code:

function replaceEllipsis(node, content) {
    node.innerHTML = content;
    // Check for the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
}

Note: Text-overflow: ellipsis is now supported natively in Firefox 7. This update is a welcome improvement, but the cross-browser CSS solution remains a useful reference for older browsers.

The above is the detailed content of How Can I Truncate Long Strings with CSS and Display an Ellipsis Across Browsers?. For more information, please follow other related articles on the PHP Chinese website!