В моем случае простое использование flex-shrink: 0
не сработало. Но добавление flex-grow: 1
к этому сработало.
.item {
flex-shrink: 0;
flex-grow: 1;
}
В этой строке:
меньше_текст = меньше_текст.substr (0, (меньше_текст-1));
вы могли иметь намерение
меньше_текст = меньше_текст.substr (0, (less_text.length-1));
Решает ли это проблему?
Спасибо, у меня все заработало, но работает только с первым элементом и останавливается, связано ли это с тем, как я объявляю переменные?
вот текущий код:
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 + '…');
} else {
return text;
}
}
Функция берет текст для проверки, 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 + '…'
}
$('span.'+className+'_hide').remove();
return smaller_text;
}