Функция усечения ширины не работает при передаче целого числа

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

Отличный материал здесь. Я использовал функцию Фила Картера. Я просто хотел, чтобы новая строка с & 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+'…';
            $('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

ВСЕГО МЫ ПИШЕМ

Поэтому я решил, что ваша итерация по тексту lorum ipsum в 5 промежутках, занимая 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 и сколько прописных M помещается в пространстве, а затем ограничивает длину текста до этого, что значительно сокращает количество итераций.

Надеюсь, это поможет.

Answer 3

Ах ... нашел ошибку - забыл передать рекурсивную часть идеальной ширины:

return constrain(smaller_text, original, ideal);

Answer 4

Что происходит, когда посетитель вашего сайта нажимает "ctl +"? Я (вероятно, устарел) убежден, что вы должны использовать размеры «em» для контейнеров шрифтов, поэтому они масштабируются.