Question

我正在尝试创建一个通用函数，我可以从多个地方调用，以递归方式截断长文本以适应预定义的像素宽度 - 使用jquery。

这是代码......

function constrain(text, original, ideal_width){

    var ideal = parseInt(ideal_width);

    $('span.temp_item').remove();
    var temp_item = ('<span class="temp_item" style="display:none">'+ text +'</span>');
    var item_length = text.length; 
    $(temp_item).appendTo('body');
    var item_width = $('span.temp_item').width();

    if (item_width > ideal) {
        var smaller_text = text.substr(0, (item_length-1));
        return constrain(smaller_text, original);
    } else if (item_length != original) {
        return (text + '&hellip;');
    } else if (item_length == original) {
        return text;
    }
}

如果我运行这样的功能：

    $('.service_link span:odd').each(function(){
    var item_text = $(this).text();
    var original_length = item_text.length;
    var constrained = constrain(item_text, original_length,'175');
    $(this).html(constrained);
});

文字没有截断。我也尝试了没有引号的175。

如果我定义var ideal = 175;在函数内部，然后它的工作原理。为什么传递175功能不起作用？我做了一个parseInt，以防它是一个字符串。

另外 - 这个截断代码在旧机器上运行速度有点慢 - 任何提高速度的技巧都会加速吗？

谢谢！

Answer 1

这里很棒的东西。我使用了Phil Carter的功能。我只是希望将带有＆amp; hellip的新字符串截断为与其余部分相同的宽度。

我刚刚快速添加了另一个临时宽度查找和递归调用。可以使用一些清理，但它的工作原理。这是新的时间：

while(item_width > ideal) {                     
            var smaller_text = text.substr(0, (item_length-1));
            return constrain(smaller_text, original, ideal_width, counter);
    } 

    if (item_length != original) {
            new_text=text+'&hellip;';
            $('span.temp_item').remove();
            var temp_item = ('<span class="temp_item" style="display:none">'+ new_text +'</span>');
            $(temp_item).appendTo('body');
            var item_width_new = $('span.temp_item').width();
        if(item_width_new>ideal){
            var smaller_text = text.substr(0, (item_length-1));
            return constrain(smaller_text, original, ideal_width, counter);         
        }
        else {
            return new_text;
        }
    } else if (item_length == original) {
            return text;
    }
}

Answer 2

当您网站的访问者按“ctl +”时会发生什么？这是我（可能已经过时）的信念，你应该使用“em”大小的字体容器，所以它们可以扩展。

Answer 3

我们写完

所以我决定你在5个跨度中对lorum ipsum文本进行迭代，花费16秒太长了，所以想到如何加快速度。我把它缩短到0.4秒。

function constrain(text, original, ideal_width, counter){

    var ideal = parseInt(ideal_width);

    $('span.temp_item').remove();
    var temp_item = ('<span class="temp_item" style="display:none">'+ text +'</span>');
    var item_length = text.length; 
    $(temp_item).appendTo('body');
    var item_width = $('span.temp_item').width();

    if(counter == 0) {
    //work out some ranges
    var temp_item = ('<span class="temp_item_i" style="display:none">i</span>');
        $(temp_item).appendTo('body');
        var i_width = $('span.temp_item_i').width();

    var max_i = Math.round((ideal_width / i_width) + 1);

    var temp_item = ('<span class="temp_item_m" style="display:none">M</span>');
        $(temp_item).appendTo('body');
        var m_width = $('span.temp_item_m').width();

    var max_m = Math.round((ideal_width / m_width) + 1);

    text = text.substr(0, (max_i - max_m));

        var item_length = text.length; 
    }
    counter++;


while(item_width > ideal) {         
            var smaller_text = text.substr(0, (item_length-1));
            return constrain(smaller_text, original, ideal_width, counter);
    } 

    if (item_length != original) {

            return (text + '&hellip;');
    } else if (item_length == original) {
            return text;
    }
}

$(document).ready(function() {
var d = new Date();
var s = d.getTime();

$('.service_link').each(function(){
        var item_text = $(this).text();
        var original_length = item_text.length;
        var constrained = constrain(item_text, original_length, 175, 0);
        $(this).html(constrained);
});

var e = d.getTime()

alert('Time Taken: ' + ((e - s)/1000));
});

基本上在第一次运行时，它计算出空格中有多少个小写的i和多少个大写的Ms，然后将文本长度限制为，这大大减少了迭代次数。

希望这会有所帮助。

Answer 4

啊......发现了这个错误 - 忘了将递归部分传递给理想的宽度：

return constrain(smaller_text, original, ideal);

传递整数时，截断宽度函数不起作用

4 个答案: