Лого www.SiteHere.ru

Как создать перенос слов CSS — абзацы с переносом слов CSS

Как создать перенос слов CSS

Продолжаем изучать возможности CSS3 и на очереди у нас перенос слов. Перенос слов является очень полезным свойством, потому что текст на странице смотрится красивее. Также, иногда приходится делать колонки как в газетах, и тогда выравнивание по правому или левому краю смотрится некрасиво. А вот если растянуть по всей ширине колонки, тогда и для глаза приятнее читать такой текст. Но и в этом случае есть такой нюанс как большие пространства между словами, что смотрится некрасиво. Это мы и будем исправлять в данном уроке.

Возможности CSS3:

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

PDF отчет

Создаем перенос слов

Текст без переносов

Если кто-то не понял о чем идет речь, вот пример без использования переноса слов:

Без переносов CSS

С переносами

А вот пример, когда мы используем перенос слов CSS:

С переносами слов

Круто! А как это сделать в коде?

Сейчас, я думаю, все прекрасно понимают что мы будем делать. Поэтому пора узнать о новом свойстве, которое есть в CSS3!

А пишется это свойство вот так — hyphens.

Просто, не так ли? Но для каждого из браузеров есть свои префиксы, поэтому в коде это выглядит так:

1
2
3
4
5
6
7
8
p {
    text-align: justify; /* текст необходимо растянуть на всю ширину блока, чтобы в дальнейшем переносить */
 
    /* свойство переноса слов для разных браузеров */
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Не забывайте растягивать текст по всей ширине блока с помощью свойства text-align: justify, иначе нужного результата вы не увидите.

Вывод

Короткий и простой урок, который позволит сделает ваш сайт еще более «удобным» для пользователя. Ведь мы ежедневно читаем огромное количество информации в сети — так давайте же сделаем этот процесс максимально приятным для посетителей! Ведь перенос слов CSS сделать очень легко, добавив пару строчек кода в ваш файл стилей.

 

Успехов!

С Уважением, Юрий Немец

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

Из чего состоит любой сайт? HTML
+
CSS
+
JS
Технологии не поддаются обучению?
Комментарии (15) к записи
  • fotodizart

    Интересное и главное простое решение, надо запомнить, возможно пригодится в работе.

     
  • Елена

    Юрий, спасибо! Очень ценная информация. Но как понять для какого браузера выбрать нужный код?

     
    • Юрий

      Елена, вот список префиксов, которые работают с этим свойством в разных браузерах:

      p {
          -webkit-hyphens: auto; /* для браузера Chrome и Safari */
          -moz-hyphens: auto; /* для браузера Firefox */
          -ms-hyphens: auto; /* для браузера Internet Explorer 10 */
          hyphens: auto;
      }

      Но вам нужно писать обязательно все 4 свойства! Чтобы во всех этих браузерах был перенос слов.

       
  • kir

    Ведь мы ежедневно читаем огромное количество информации в сети — так давайте же сделаем этот процесс максимально приятным

    вот и начали бы с себя..

     
    • Юрий

      Вам неудобно читать текст на моём сайте?

       
      • kir

        ни одного переноса в статье нет)

         
        • Юрий

          Переносы слов еще зависят от разрешения монитора: может быть такая ситуация, что на большом мониторе нет необходимости переносить слова, потому что они и так хорошо смотрятся.

          Для примера я уменьшил ширину окна браузера (фото ниже):

          Перенос слов
           
  • Александр

    Юрий, спасибо! Но у меня не перенос слов получился, а просто текст стал ровнее (каждая строчка точно вписывается от первой буквы первого слова, до последей буквы последнего в каждой строке), поразительно!

     
  • Александр

    Я смотрю, это за счет увеличения пробелов. Видно у меня там еще какое-то правило прописано.

     
  • Vasily

    В приличных печатных изданиях переносы слов осуществляются по правилам русского языка. Видимо, CCS3 применяет какой-то общий алгоритм переноса для всех языков?

     
  • Александр

    Надо для меню задать правило — переносим на новую строку все слова кроме первого.

    1 Всегда

    или

    2. Когда не помещаются

    Как реализовать?

     
  • Александр

    Виноват. Не для меню, а для названия модуля.

     
  • Дмитрий

    Ребят, на самом деле, если у вас не работают переносы, дело тут не в ширине окна браузера. Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка. Так, для русского языка следует добавить lang="ru" к элементу <html> или непосредственно к абзацу текста.

    Удачи!

     
  • Андрей

    Переносы не работают в Chrome и Opera.

     

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

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