从字符串中递归删除字符，直到所述字符串匹配固定宽度 [英] 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.

以下内容似乎无效.

                    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);
                        }
}

推荐答案

只要标题和日期为内联，内联块或浮动块元素，以下内容将起作用.

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

请参见 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;
    }
});

这篇关于从字符串中递归删除字符，直到所述字符串匹配固定宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！