Как избавиться от висячей строки в заголовке

Наверное, часто встречали, что название статьи не помещается полностью в одну строчку. В результате последнее слово заголовка переносится на новую строку. Такую строку называют «висячей строкой».

Видно что одно слово plugin одиноко занявшая целую строку «режет» глаз. Считается что такие строки ухудшают удобочитаемость текста. Было бы неплохо, что бы выглядело вот так.

Как с нею бороться? Один из вариантов вставить между последним словом и предпоследним неразрывный пробел –  . Но согласитесь каждый раз руками это делать не хочется, да не всегда есть такая возможность (например, если контекст набирается через визуальные редакторы CMS). С точки зрения чистоты кода, такое решение тоже не обосновано.

Выход. Написать небольшой скрипт используя библиотеку jQuery, который возьмет на себе эту рутинную операцию.

Для начало каждый наш заголовок обернем тэгами <h2></h2>.

$(document).ready(function() {
    var h2Text = '';
    $('h2').each(function() {
        h2Text  = $(this).text().replace(/ (\w+)$/,' $1')
        $(this).html(h2Text);
    });
});

Рассмотрим алгоритм работы скрипта

• строка 3 – осуществляет поиск текста заголовка в нутри тэга <h2></h2>
• строка 4 – осуществляет поиск и замену с помощью регулярного выражения
• строка 5 – измененную строчку записываем на старом месте