Як створити перенесення слів css - абзаци з перенесенням слів css

Як створити перенесення слів CSS

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

Можливості CSS3:

  • Межі css використовуючи градієнт
  • Набір ефектів при наведенні CSS
  • Текст в декілька стовпців за допомогою CSS3
  • CSS3 повторення градієнта
  • Прості способи створити вертикальний текст на CSS

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

Відео: Уроки CSS. Форматування CSS коду: прогалини, переноси рядків і табуляція в CSS

Створюємо перенесення слів

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

Якщо хтось не зрозумів про що йде мова, ось приклад без використання перенесення слів:

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

З переносами



А ось приклад, коли ми використовуємо перенесення слів CSS:

З переносами слів

Круто! А як це зробити в коді?

Зараз, я думаю, все прекрасно розуміють що ми будемо робити. Тому пора дізнатися про новий властивості, яке є в CSS3!

А пишеться це властивість ось так - hyphens.

Просто, чи не так? Але для кожного з браузерів є свої префікси, тому в коді це виглядає так:

12345678
p {text-align: justify- / * Текст необхідно розтягнути на всю ширину блоку, щоб в подальшому переносити * // * Властивість переносу слів для різних браузерів * /-webkit-hyphens: auto--moz-hyphens: auto-hyphens: auto-}

Відео: Курс відео уроків з основ HTML для початківців. Самовчитель по HTML з нуля

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

висновок

Короткий і простий урок, який дозволить зробить ваш сайт ще більш «зручним» для користувача. Адже ми щодня читаємо величезна кількість інформації в мережі - так давайте ж зробимо цей процес максимально приємним для відвідувачів! Адже перенесення слів CSS зробити дуже легко, додавши пару рядків коду в ваш файл стилів.

Успіхів!

З повагою, Юрій Німець

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!