Текст
Крім того, можна задати розмір тексту за допомогою CSS, встановлюючи його в пунктах, пікселах або інших одиницях. Існує ще один варіант – створити текст у графічній програмі та додати його на веб-сторінку у вигляді зображення.
Теги можна повторювати кілька разів поспіль, тим самим збільшуючи або зменшуючи текст до потрібних розмірів (приклад 1).
Приклад 1. Використання тега
Текст
Використовуючи теги для збільшення тексту, можна досягти великих результатів.
Результат цього прикладу показано на рис. 1.
Мал. 1. Вид тексту, оформленого за допомогою тега
Серед перелічених у таблиці тегів переважно застосовуються теги , та . Вони призначені для створення заголовків до розділів і показують їхню відносну важливість. Так, за замовчуванням текст усередині тега відображається у жирному контурі та розміром 24 пунктів. Вміст тега має розмір 18 пунктів, а — 14 пунктів (приклад 2).
Приклад 2. Застосування тегів і
Заголовки
Заголовок 1
Заголовок 2
Заголовок 3
Результат цього прикладу показано на рис. 2.
Мал. 1. Заголовки різного рівня на сторінці
Текст
Крім того, можна задати розмір тексту за допомогою CSS, встановлюючи його в пунктах, пікселах або інших одиницях. Існує ще один варіант – створити текст у графічній програмі та додати його на веб-сторінку у вигляді зображення.
Теги можна повторювати кілька разів поспіль, тим самим збільшуючи або зменшуючи текст до потрібних розмірів (приклад 1).
Приклад 1. Використання тега
Текст
Використовуючи теги для збільшення тексту, можна досягти великих результатів.
Результат цього прикладу показано на рис. 1.
Мал. 1. Вид тексту, оформленого за допомогою тега
Серед перелічених у таблиці тегів переважно застосовуються теги , та . Вони призначені для створення заголовків до розділів і показують їхню відносну важливість. Так, за замовчуванням текст усередині тега відображається в жирному контурі та розміром 24 пунктів.Вміст тега має розмір 18 пунктів, а — 14 пунктів (приклад 2).
Приклад 2. Застосування тегів і
Заголовки
Заголовок 1
Заголовок 2
Заголовок 3
Результат цього прикладу показано на рис. 2.
Мал. 1. Заголовки різного рівня на сторінці
Текст по всій ширині
Щоб текст був по всій ширині, я використовував align="justify". Все вийшло, але з'явився один баг: у тексті створюються великі прогалини. Як виправити?
це баг, це правильне виконання властивості align='justify'. Щоб не було великих прогалин - потрібно використовувати вирівнювання по краю.
Адже в Microsoft Word подібних прогалин не спостерігається. Ймовірно, що HTML є спосіб їх усунення.
Спробуй погратися з шириною контейнера, в якому текст і відступами, або спробуй переосмислити текст.
3 відповіді 3
Використовуйте знаки перенесення.
Порівняйте перший варіант (без перенесення) та другий (з перенесенням слів)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Не обманюйте себе, багом ця дія не є. Це стандартна поведінка вирівнювання по всій довжині ( align = "justify")
Наприклад у MS Word спостерігаються такі самі прогалини.
Ось приклад:
Це пов'язано з тим, що якщо довжина слова, перенесеного на новий рядок перевищує допустимий розмір поля, якщо буде поміщена на попередній рядок, то слово переноситься вниз, відповідно, той рядок, попередній, він розтягується по всій довжині.
Як варіант рішення вам потрібно:
- Зробити вирівнювання по краю
- Підганяти текст під розмір допустимого поля (якщо статичний текст)
- Підганяти розмір поля під текст (також якщо статичний текст)
- Змиритися (так, це теж як варіант)
Я хотів спробувати розбивати довгі слова та переносити їх на новий рядок, використовуючи властивість hyphens, але чомусь нічого не відбувається.
@ДенисПавлик наскільки я знаю в актуальних версіях браузерів ці властивості не підтримуються.Можете спробувати скористатись готовим рішенням github.com/mnater/hyphenator
Якщо змиритись, як це пропонує попередній оратор, не варіант — є спосіб трохи полегшити візуальні страждання. Домогтися ефекту покращення можна за допомогою негативного word-spacing. Для досягнення більш-менш прийнятного ефекту зі значенням доведеться експериментувати.
.text, .text-alt <text-align: justify; width: 400px; >.text-alt
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quidem assumenda consequatur fugit quas dolorem similique tempora voluptatum eum perspiciatis incidunt hic perferendis cumque repellendus eaque quisquam pariatur soluta modi velit. Reprehenderit rem recusandae nostrum placeat ratione, quia iure, voluptatem ad voluptatibus tempor dignissimos sit quaerat, voluptates. Molestiae nostrum, inventore deleniti, aspernatur odio auto repellat vitae quaerat mollitia quos aliquid dolorum quis reprehenderit, u consequatur repellendus quisquam ipsum dolores. Rem minima velit non, quam reiciendis! Esse minima corporis architecto id vitae fuga. Consequatur asperiores veniam commodi, velit voluptatibus obcaecati expedita ipsam quo dicta similique animi fugiat quia magni libero.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quidem assumenda consequatur fugit quas dolorem similique tempora voluptatum eum perspiciatis incidunt hic perferendis cumque repellendus eaque quisquam pariatur soluta modi velit. Reprehenderit rem recusandae nostrum placeat ratione, quia iure, voluptatem ad voluptatibus tempor dignissimos sit quaerat, voluptates. Molestiae nostrum, inventore deleniti, aspernatur odio auto repellat vitae quaerat mollitia quos aliquid dolorum quis reprehenderit, u consequatur repellendus quisquam ipsum dolores. Rem minima velit non, quam reiciendis! Esse minima corporis architecto id vitae fuga.Consequatur asperiores veniam commodi, velit voluptatibus obcaecati expedita ipsam quo dicta similique animi fugiat quia magni libero.
Перший блок тексту — звичайний джастіфай, другий — із негативним ворд-спейсином.
