Делаем выравнивание по ширине красивым


Совсем недавно столкнулся с такой задачей, что понадобилось  в шаблоне очередного заказа  выравнять текст  по ширине ( justify ).
Выравнивание текста по ширине  и отображение его в узких столбцах известная проблема  многих веб-верстальщиков. Долго описывать не буду, но выглядит это ужасно с переносом длинных слов и большими промежутками между слов.


Было:

Решение было найдено благодаря одному замечательному плагину для wordpress   Hyphenator .
Hyphenator автоматически вставляет  тире  в конце строки текста.
Но активировать плагин не достаточно. Надо присвоить класс данного плагина к вашему основному шаблону, иначе РАБОТАТЬ НЕ БУДЕТ .

 И  для большего удобства, что бы каждый раз не  указывать в посте justify  надо  и это прописать в  вашем шаблоне.

И так  находим  тег  в который заключено содержание поста, как правило это

но в разных шаблонах зависимо от уровня сложности может отличаться  и присвоить ему данный стиль и класс

После этого проверяем и у нас должен получиться желаемый результат.
Стало:

Этот метод мне настолько понравился, что мы решили сделать его на данном сайте.

У кого, что не получается или не понятно пишите в комментарии.

 

[download]

P.S. Как в css сделать перенос слов на другую строчку

Для того, что бы сделать в css перенос строк или слов надо добавить в файл стилей всего лишь один кроссбраузерный и валидный код:


Понравился пост, подпишись на обновления

Понравилась статья? Получай свежие статьи первым по e-mail

[newsletter_signup_form id=0]

25 раз(а) написали о “Делаем выравнивание по ширине красивым

  1. Во вроде нашел на этом сайте как раз то что мне нужно было, а то у меня статьи на сайте очень не красиво выглядят! Буду пробовать! Спасибо!

    Ответить
  2. Отличная статья, у меня самого есть блог на wordpress, и сам долго мучился с этой проблемой, теперь надеюсь, что решу ее с помощью этого плагина.

    Ответить
  3. наверное не правильно чтото делаю, не получается

    Ответить
    • А что именно делали, плагин Hyphenator установили?

      Ответить
  4. Установил, активировал. Не получается выполнить услови «присвоить ему данный стиль и класс» . я так понял это нужно сделать в ВНЕШНИЙ ВИД/РЕДАКТОР/SIMPLE.PHP но по видимому, не хватает знаний по оформлении этого .(( Если не трудно роскажите поподробней!

    Ответить
    • Если Вам надо применить данный метод к выводу полного поста, то вы правы надо править(single.php)
      Ищите:

      и заменяйте на

      по аналогии делаем и в других местах где надо применить данный эффект

      Ответить
  5. Спасибо, Игорь за Ваш труд. С этим плагином у меня все получилось с первого раза. Текст выровнялся по ширине. 💡

    Ответить
  6. Добрый день, Игорь. Хотел спросить обновлять этот плагин надо, а то у меня уже неделю висит обновление до версии 4.0.0?

    Ответить
    • Можете обновить, я лично обновил косяков в работе не заметил 😛

      Ответить
  7. Здравствуй, Игорь! У меня что-то не получается(( Сделал как все написано — нашел single, заменил на , может мне еще в style.css надо заменять?

    Ответить
  8. Просто прописал в body.content, в style.css, и сейчас выравнивает, но чтобы плагин с разделением слов заработал, не получилось :smile:, а как у вас плагин на комментарии называется?)

    Ответить
    • Алексей, добрый день!
      Смотрел ваш сайт полную новость, у вас работают переносы. А вот на главной странице не работает, что бы это исправить надо в файл index.php (как правило,все зависит от вашего шаблона) в нужном месте присвоить

      И не совсем понял про какой плагин вы имеете ввиду, тот что в форме написания комментария?

      Ответить
  9. Привет! Да, ты совершенно прав, я заметил это чуть-чуть позже. Поищу, где присвоить в index.pgh, хотя и так не плохо)

    -Да, очень хотелось бы такую панельку в комментариях как у вас — с редактированием текста и смайликами — буду благодарен за объяснения.

    Ответить
    • Comment Form Toolbar — этот то самый плагин, который вам нужен.
      Он создает эту самую панель. НЕ требует редактирования в коде темы, просто активируйте плагин и все можно работать.

      Ответить
      • Спасибо, большое — сейчас попробую! :mrgreen:

        Ответить
  10. Сразу возникает еще вопрос, а как сделать галочку для подписи на комментарии (чтобы на почту приходили обновления) буду очень признателен!! =)

    Ответить
    • В подписке на комментарии вам поможет плагин Subscribe to Comments Reloaded

      Ответить
      • Отлично, еще раз огромное спасибо, добавил Ваш сайт в закладки, рекомендую друзьям — будем дружить! 💡

        Ответить
        • Конечно будем дружить !!!

          Ответить
  11. Игорь! Большое спасибо за подсказку!Все с переносами получилось с первого раза, и текст буквально «заиграл»! Сейчас хочу практически с нуля сделать свой сайт,и обязательно буду часто заглядывать за подсказками к Вам 🙂

    Ответить
    • Рад помочь! Буду рад видеть вас снова! 😕

      Ответить
  12. Достаточно хорошо расписали тоже искал решение этой проблемы, благодаря вам решил 😉

    Ответить
  13. у меня при использовании этого плагина все работает в Хроме и ИЕ, а Опера и Мозила ругаются

    Security error: attempted to read protected variable

    в чем дело?

    Ответить
    • Точно не помню у меня тоже была такая беда. Надо, какие-то галочки отключить в настройках плагина.

      Ответить
      • разобрался надо включить галочку тут

        use Hyphenator.js from developer trunk

        вдруг кому то пригодиться 😉

        Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.