Усеченный текст с jQuery на основе пиксельной ширины

В моем случае простое использование flex-shrink: 0 не сработало. Но добавление flex-grow: 1 к этому сработало.

.item {
    flex-shrink: 0;
    flex-grow: 1;
}
16
задан novon 22 May 2009 в 00:08
поделиться

3 ответа

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

меньше_текст = меньше_текст.substr (0, (меньше_текст-1));

вы могли иметь намерение

меньше_текст = меньше_текст.substr (0, (less_text.length-1));

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

3
ответ дан 30 November 2019 в 16:50
поделиться

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

вот текущий код:

    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;
    }
}
0
ответ дан 30 November 2019 в 16:50
поделиться

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

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;
}
0
ответ дан 30 November 2019 в 16:50
поделиться
Другие вопросы по тегам:

Похожие вопросы: