Як створити перенесення слів css - абзаци з перенесенням слів css
Продовжуємо вивчати можливості CSS3 і на черзі у нас перенесення слів. Перенесення слів є дуже корисною властивістю, тому що текст на сторінці виглядає красивіше. Також, іноді доводиться робити колонки як в газетах, і тоді вирівнювання по правому або лівому краю виглядає негарно. А ось якщо розтягнути по всій ширині колонки, тоді і для ока приємніше читати такий текст. Але і в цьому випадку є такий нюанс як великі простори між словами, що виглядає негарно. Це ми і будемо виправляти в даному уроці.
Можливості CSS3:
- Межі css використовуючи градієнт
- Набір ефектів при наведенні CSS
- Текст в декілька стовпців за допомогою CSS3
- CSS3 повторення градієнта
- Прості способи створити вертикальний текст на CSS
Вивчаючи статті, яка підібрав для вас, вище, ви також дізнаєтеся масу корисних властивостей, а також дізнаєтеся про нові можливості CSS3, яка дозволяє використовувати менше ще менше зображень на сайті.
Відео: Уроки 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 зробити дуже легко, додавши пару рядків коду в ваш файл стилів.
Успіхів!
З повагою, Юрій Німець