Recursively Remove Characters From String Until Said String Matches A Fixed Width

As per the title suggests i am trying to remove characters from the end of a string until the width of the string matches the parent elements width. The following seems to not work

Solution 1:

The following will work as long as the headline and date are inline, inline-block or floated block elements.

See http://jsfiddle.net/FGADG/5/

$('li').each(function() {
    var listWidth = $(this).outerWidth(),
        headLine = $(this).find('.headline'),
        dateLine = $(this).find('.date'),
        headlineWidth = headLine.outerWidth(),
        dateWidth = dateLine.outerWidth(),
        contentWidth = headlineWidth + dateWidth;

    var html = headLine.html();
    for (var i = html.length-1; i >= 0; i--) {
        if (contentWidth >= listWidth) {
            headLine.html(html.substr(0, i));
            headlineWidth = headLine.outerWidth();
            dateWidth = dateLine.outerWidth();
            contentWidth = headlineWidth + dateWidth;
        }
        elsebreak;
    }
});