[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Решение переноса длинных слов
DedMorozzz
Возникла задача анализировать длину слова и если превышает ширину элемента в котором находится, переносить...
Причём что бы перенос не было 1й последней буквы
Сперва поискав такие решения - не нашел(хотя уверен, что они есть) написал своё

Уточню, что по специфике переносить максимально реже надо. По этому слово из 12и символов будет по длине другого 12и символного может сильно отличаться, в силу разного размера букв

В итоге написал ф-ю, естественно написана для себя но в случае чего - крайне легко дополняется и изменяется

Собсно сама ф-я.
PS: Коментрии все перевёл

function check_word_len(selector_name) {
var orig_selector = $('.'+selector_name);

var font_size = $('.'+selector_name).css('font-size');
var font_family = $('.'+selector_name).css('font-family');

//Создаю новый элемент с размером шрифта и типом шрифта, как и исходный селектор
//в него будет вставляться каждое слово для проверки длины

var new_element_id = 'test_place_name';
var new_element_selector = '#'+new_element_id;
$(new_element_selector).remove();
$('body').append($('<div>', {'id': new_element_id}));
$(new_element_selector).css('display','inline-block');
$(new_element_selector).css('visibility','hidden');
$(new_element_selector).css('font-size',font_size);
$(new_element_selector).css('font-family',font_family);

//учитывая, что селектор в моём случае класс, а их может быть много - каждый кидаю в цикл
$.each(orig_selector, function(class_number, class_content) {
var orig_str = $(class_content).html();
var words = orig_str.split(' ');
var len = $(words).length;
var new_string ='';

//Рабиваю содержимое класса по пробелу и далее каждое слово проверяю на длину
$.each(words, function(word_number, word_value) {
$(new_element_selector).html(word_value);
var current_word_len = $(new_element_selector).width();
var base_len = $('.'+selector_name).width();

//если ширина элемента меньше ширины слова - разбиваем слово
if(current_word_len>base_len){
var len1 = $(new_element_selector).html().length;
var len2 = len1/2;
len2 = Math.round(len2);

var reg_for_split = new RegExp('(.{1,'+len2+'})', 'ig');
var matches = word_value.match(reg_for_split);

$(word_value).html(matches[0]+'<br />'+matches[1]);
new_string = new_string+" "+matches[0]+'<br />'+matches[1];
}else{
new_string = new_string+" "+word_value;
}
if (word_number == len - 1) {
//если слово последнее - соединяем все обработаные и заменяем исходный текст
$(class_content).html(new_string);
}
}
);
});
}


_____________
Если не говорить пользователям, что Linux это "Сложно и страшно", то им совершенно всё равно, в чём не разбираться
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.