left-side version of overflow: ellipses

HTML

<div id="container" >
    <div>first > second > third</div>
    <div>second > third > fourth > fifth > sixth</div>
    <div><b>fifth > sixth > seventh > eighth</b> > ninth > tenth</div>
    <div>one > <span style="color: red"><b>two</b> > three > <b>four</b> > five</span> > <b>six</b> > <span style="color: blue">seven > <b>eight</b></span></div>
</div>

CSS

#container {
    width: 250px;
    border: 1px solid blue;
}

#container div {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

JavaScript

var rows = document.getElementById('container').childNodes;
for (var i=0, row; row = rows[i]; i++) {
    trimLeft(row);
}

function trimLeft(row){
    var trimContents = function(row, node){
        while (row.scrollWidth > row.offsetWidth) {
            
            var childNode = node.firstChild;
            
            if (!childNode)
                return true;
            
            if (childNode.nodeType == document.TEXT_NODE){
                trimText(row, node, childNode);
            }
            else {
                var empty = trimContents(row, childNode);
                if (empty){
                    node.removeChild(childNode);
                }
            }
        }
    }
    var trimText = function(row, node, textNode){
        var value = '...' + textNode.nodeValue;
        do {
            value = '...' + value.substr(4);
            textNode.nodeValue = value;
            
            if (value == '...'){
                node.removeChild(textNode);
                return;
            }
        }
        while (row.scrollWidth > row.offsetWidth);
    }

    trimContents(row, row);    
}