递归地从字符串中删除字符，直到所述字符串与固定宽度匹配

Question

根据标题建议我尝试从字符串末尾删除字符，直到字符串的宽度与父元素宽度匹配。

以下似乎无效。

                    var $list = $('#market_update_content').find('li'),
                    $i = $list.length,
                    $listWidth = $list.outerWidth(),
                    $listWidth = 200;

                    while ($i--) {

                        var $headLine = $($list[$i]).find('.headline'),
                        $headlineWidth = $headLine.outerWidth(),
                        $dateWidth = $($list[$i]).find('.date').outerWidth(),
                        $contentWidth = $headlineWidth + $dateWidth,
                        $difference = $contentWidth - $listWidth;

                        while ($contentWidth >= $listWidth) {
                            $headLine.slice(0, -1);
                        }
}

Answer 1

只要标题和日期是内联块，内联块或浮动块元素，以下内容就会起作用。

请参阅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;
        }
        else
            break;
    }
});