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

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

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

• Границы css используя градиент
• Набор эффектов при наведении CSS
• Текст в несколько столбцов с помощью CSS3
• CSS3 повторение градиента
• Простые способы создать вертикальный текст на CSS

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

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

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

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

С переносами

А вот пример, когда мы используем перенос слов 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 сделать очень легко, добавив пару строчек кода в ваш файл стилей.

Успехов!

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