Небольшой плагин для автоматической расстановки переносов строк в HTML для русского текста

Делая сайт с адаптивным дизайном, столкнулся со следующей проблемой — на небольших экранах слова переносились не очень красиво. В поисках решений есть множество вариантов, но подразумевают либо ручную правку текста и вставкой спецсимвола мягкого переноса «­» или использование css свойства hyphens, за счет которого используются возможности браузеров для переноса строк, но оно поддерживается не всеми браузерами. Решение было найдено в виде простого плагина, описание которого в статье.

Для решения проблемы нашелся небольшой плагин для jQuery, который автоматически подставляет символ «мягкого» переноса строки «­» в русском тексте.

Оформлен он как плагин для jQuery, но ничего не мешает переписать его под чистый JS.

Использовать его достаточно просто:

Результат:

Текст до:

Текст после:


  • Афанасьев Андрей

    Добрый день, подскажите как его подключать. Я создал файл hephen.js с кодом скрипта, подключил его в шаблоне, в head вставил jQuery(‘.text’).hyphenate();.

    Не чего не работает, подскажите как правильно делать?

    • Stanislav

      Добрый. Вы проверяли работу плагина на блоке с классом .text? Т.е. в данном случае взаимодействие будет на текст внутри Текст

      • Афанасьев Андрей

        Проверил только что. Не работает. Может я не правильно подключил скрипт.

        • Stanislav

          Нужна ссылка на неработающий вариант, так не разобраться. jQuery, надеюсь, подключен? В консоли ошибок javascript нет?

          • Афанасьев Андрей

            Чуть попозже я дам ссылку, когда сайт создам.

          • Stanislav

            Ок. Ну и последнее, код запускать после загрузки документа:

            jQuery(function() {
            jQuery(‘.text’).hyphenate();
            })

          • Афанасьев Андрей

            Вы можете для новичков написать статью, как правильно подключать и где. Например я в Joomla пытался подключить. Не вышло.

            Я бы был очень благодарен за данную статью.

          • Stanislav

            Увы, но со временем сейчас все сложно. Тут ничего сложного нет, подключаем jQuery, подключаем кастомный js скрипт, в котором прописываем плагин из статьи + код:
            jQuery(function() {
            jQuery(‘.text’).hyphenate();
            })

            Вот и все. Специфику подключения в разных CMS лучше смотреть в обучающих материалах на профильных ресурсах.

          • Афанасьев Андрей

            Ясно, спасибо.

          • Афанасьев Андрей

            Не все даже знают, как правильно подключать скрипты.

          • Stanislav

            Так можно бесконечно писать. Не все знают как включать компьютер 🙂 Если люди не знают как подключать скрипты, то лучше воздержаться от работы с jQuery до момента изучения таких вещей.