Похоже, что проблема возникает из-за того, что ваш регулярный плагин для переноса слов обрабатывает весь HTML внутри #test как текст, и при этом <div id='line_break'></div> тоже попадает под обработку. Когда вы добавляете английские гласные в RusLatV, регулярка пытается найти совпадения даже внутри пустого div, и браузер теряет стили, потому что HTML-разметка переписывается .html() методом.
Самый простой способ это исправить — исключить дочерние элементы из обработки, чтобы перенос применялся только к текстовым узлам. Например, так:
$.fn.hyphenate = function(){
var RusLatA = "[abcdefghijklmnopqrstuvwxyzабвгдеёжзийклмнопрстуфхцчшщъыьэюя]";
var RusLatV = "[aeiouаеёиоуыэюя]";
var RusLatN = "[bcdfghjklmnpqrstvwxyzбвгджзклмнпрстфхцчшщ]";
var RusLatX = "[йъь]";
var Hyphen = "\xAD";
var re1 = new RegExp("("+RusLatX+")("+RusLatA+RusLatA+")","ig");
var re2 = new RegExp("("+RusLatV+")("+RusLatV+RusLatA+")","ig");
var re3 = new RegExp("("+RusLatV+RusLatN+")("+RusLatN+RusLatV+")","ig");
var re4 = new RegExp("("+RusLatN+RusLatV+")("+RusLatN+RusLatV+")","ig");
var re5 = new RegExp("("+RusLatV+RusLatN+")("+RusLatN+RusLatN+RusLatV+")","ig");
var re6 = new RegExp("("+RusLatV+RusLatN+RusLatN+")("+RusLatN+RusLatN+RusLatV+")","ig");
this.each(function(){
$(this).contents().each(function(){
if(this.nodeType === 3){ // только текстовые узлы
var text = this.nodeValue;
text = text.replace(re1, "$1"+Hyphen+"$2");
text = text.replace(re2, "$1"+Hyphen+"$2");
text = text.replace(re3, "$1"+Hyphen+"$2");
text = text.replace(re4, "$1"+Hyphen+"$2");
text = text.replace(re5, "$1"+Hyphen+"$2");
text = text.replace(re6, "$1"+Hyphen+"$2");
this.nodeValue = text;
}
});
});
};
Изменения:
Используется $(this).contents() вместо $(this).html().
Проверяем nodeType === 3, чтобы обработка шла только по текстовым узлам, а <div id='line_break'> оставался нетронутым.
Таким образом, стили #line_break будут сохраняться, а перенос слов будет работать и для латиницы.