Усекать текст с помощью jQuery на основе ширины пикселя

Я пытаюсь использовать jquery для записи быстрой функции, которая вычисляет ширину пикселя строки на странице html, а затем обрезает строку до тех пор, пока она не достигнет идеальной ширины пикселя...

Однако он не работает (текст не обрезается)...

Вот код, который у меня есть:

    function constrain(text, original, ideal_width){

    var temp_item = ('<span class="temp_item" style="display:none;">'+ text +'</span>');
    $(temp_item).appendTo('body');
    var item_width = $('span.temp_item').width();
    var ideal = parseInt(ideal_width);
    var smaller_text = text;

    while (item_width > ideal) {
        smaller_text = smaller_text.substr(0, (smaller_text-1));
        $('.temp_item').html(text);
        item_width = $('span.temp_item').width();
    }

    var final_length = smaller_text.length;

    if (final_length != original) {
        return (smaller_text + '&hellip;');
    } else {
        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);
});

Любые идеи о том, что я делаю неправильно? Если есть способ сделать это быстрее (например, сортировка пузыря), это тоже будет здорово.

Спасибо!

Ответ 1

Вместо того, чтобы взломать это вместе с script, почему бы просто не использовать CSS для определения ширины элемента, в который вы вставляете эту строку? Вы можете использовать text-overflow, чтобы сообщить браузеру об усечении с помощью многоточия.

.truncated { display:inline-block; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

text-overflow является объявлением CSS3, но поддерживается в IE 6+, WebKit 312.3+ (Safari 1.3 +/Chrome) и Opera 9+ (версии < 10.7 нуждаются в объявлении -o-text-overflow).

Обратите внимание, что этот был не реализован в Firefox до 7.0 и под 4 % пользователей Firefox по-прежнему используют старые версии (в основном 3,6). Ваш текст по-прежнему будет усечен в более старых версиях, просто не будет отображаться эллипсис. Если вас беспокоит эта небольшая группа пользователей, вы можете использовать этот плагин jQuery, который ничего не делает в IE/WebKit/Opera/Firefox & ge; 7, но будет эмулировать text-overflow в Firefox & le; 6.

Ответ 2

В этой строке:

smaller_text = smaller_text.substr(0, (smaller_text-1));

возможно, вы указали

smaller_text = smaller_text.substr(0, (smaller_text.length-1));

Решает ли эта проблема?

Ответ 3

Спасибо, я получил его работу, но он работает только с первым элементом и останавливается, это связано с тем, как я объявляю переменные?

здесь текущий код:

    function constrain(text, original, ideal_width){

    var temp_item = ('<span class="temp_item" style="display:none;">'+ text +'</span>');
    $(temp_item).appendTo('body');
    var item_width = $('span.temp_item').width();
    var ideal = parseInt(ideal_width);
    var smaller_text = text;

    while (item_width > ideal) {
        smaller_text = smaller_text.substr(0, (smaller_text.length-1));
        $('.temp_item').html(smaller_text);
        item_width = $('span.temp_item').width();
    }

    var final_length = smaller_text.length;

    if (final_length != original) {
        return (smaller_text + '&hellip;');
    } else {
        return text;
    }
}

Ответ 4

Функция принимает текст для проверки, идеальную ширину в пикселе и имя класса для css. Если ideal_width меньше ширины текста, он усекает и добавляет hellip, иначе он возвращает текст без изменений. Простой и работает!: -)

function constrain(text, ideal_width, className){

    var temp_item = ('<span class="'+className+'_hide" style="display:none;">'+ text +'</span>');
    $(temp_item).appendTo('body');
    var item_width = $('span.'+className+'_hide').width();
    var ideal = parseInt(ideal_width);
    var smaller_text = text;

    if (item_width>ideal_width){
        while (item_width > ideal) {
            smaller_text = smaller_text.substr(0, (smaller_text.length-1));
            $('.'+className+'_hide').html(smaller_text);
            item_width = $('span.'+className+'_hide').width();
        }
        smaller_text = smaller_text + '&hellip;'
    }
    $('span.'+className+'_hide').remove();
    return smaller_text;
}

Ответ 5

Если у вас есть текст и знаете нужный размер, почему бы просто не использовать substr?

Я сделал что-то подобное с

$('#history-1').text( $('#history-1').text().trim().substr(0,32) + "..." )