HTML вирівнювання тексту по центру, ширині та відступу. Властивості CSS для оформлення тексту HTML (vertical-align, text-align, text-indent та інші) Розрив рядка та межі слів

Головна / Додатковий функціонал

Зазвичай автор сайту сам вирішує, які літери будуть великими, а які малими, виходячи з правил правопису та власних уподобань. Проте процес зміни регістрів символів можна автоматизувати, використовуючи властивість text-transform. Ця властивість може приймати чотири значення:

  • none – текст пишеться без змін;
  • capitalize- кожне слово буде починатися з великого символу;
  • lowercase - всі символи стають малими (нижній регістр);
  • uppercase- всі символи стають великими (верхній регістр).

Наприклад, наступне правило вказує, що заголовок H1 повинен виводитися великими літерами:

H1 (text-transform: uppercase;)

Автоматичну зміну регістру символів зручно задавати для абревіатур, назв елементів, заголовків та інших елементів тексту, де потрібно писати великі або малими символами.

Прикраса тексту: властивість text-decoration

Властивість text-decorationдозволяє задати додаткове оформлення тексту. значеннями даної властивостіє константи none, underline, overline, line-throughі blink, що дозволяє відобразити звичайний текст, провести лінію над, під або через текст, а також зробити миготливим текст. Приклад використання різних значень цієї властивості наведено малюнку 11.4 .


Рис. 11.4.

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

A:link (text-decoration: underline;)

Інтервал між словами: властивість word-spacing

Щоб встановити інтервал між словами в тексті, використовується властивість word-spacing. Значення цієї властивості можна задати за допомогою ключового слова normal , яке використовується за замовчуванням і задає стандартний інтервал для поточного шрифту. Для завдання інтервалу на додаток до стандартного можна вказати значення будь-яких доступних одиницях CSS, причому значення може бути і негативним.

Так, наступне правило збільшує інтервал між словами в заголовку H1 на 1em:

H1 (word-spacing: 1em;)

Вирівнювання тексту: властивість text-align

Вирівнюванням називається розміщення лівого або правого краю блоку тексту вздовж невидимої вертикальної лінії. Для вирівнювання тексту використовується властивість text-align. Допустимими значеннями даної властивості є left, right, center і justify, що задають вирівнювання по лівому краю, правому краю, центром і шириною відповідно.

Наступне правило встановлює вирівнювання по центру всіх елементів, що містяться в елементі DIV:

DIV (text-align: center;)

Інтерліньяж: властивість line-height

Інтерліньяжем називається відстань між базовими лініями близьких один до одного рядків. За звичайних обставин відстань між рядками залежить від виду та розміру шрифту та автоматично визначається браузером. Але це значення можна змінити за допомогою властивості line-height . За замовчуванням значення normal змушує браузер обчислювати відстань між рядками автоматично. Будь-яке число більше за нуль сприймається як множник від розміру шрифту поточного тексту. Як значення даної властивості можна також використовувати будь-які одиниці довжини, прийняті в CSS. Дозволяється також використовувати відсотковий запис, причому в цьому випадку за 100% приймається висота шрифту. Негативне значення міжрядкової відстані не допускається.

Інтервал між літерами: властивість letter-spacing

Браузер автоматично підбирає інтервали між символами, виходячи з розміру та типу шрифту. У деяких випадках необхідно підкоригувати відстань між літерами. Для керування міжлітерним інтервалом використовується властивість letter-spacing. Як значення цієї властивості можуть використовуватися будь-які одиниці довжини, прийняті в CSS, проте рекомендується використовувати відносні одиниці, засновані на розмірі шрифту (em і ех). На відміну від міжрядкового інтервалу, властивість letter-spacing допускає використання негативного значення, проте у разі треба переконатися, що зберігається читабельність тексту.

Наступне правило збільшує інтервал між символами у заголовку H1 на 0.5em.

HTML теги, що визначають вирівнювання тексту, відступ

Вирівняний по ширині текст використовується в друкарні

У прикладі нижче показано, як вирівняти текст за шириноюсторінки:

align="left" align="right"

З кожним днем ​​зростає кількість працівників зайнятих у сфері послуг та поширення інформації. Якщо символами минулих століть були ферма та фабрика, то символ нинішнього XXI століття – це офіс, обладнаний комп'ютерами, які мають доступ до інформаційного потоку.
align="justify" align="center"

З кожним днем ​​зростає кількість працівників зайнятих у сфері послуг та поширення інформації. Якщо символами минулих століть були ферма та фабрика, то символ нинішнього XXI століття – це офіс, обладнаний комп'ютерами, які мають доступ до інформаційного потоку.

З кожним днем ​​зростає кількість працівників зайнятих у сфері послуг та поширення інформації. Якщо символами минулих століть були ферма та фабрика, то символ нинішнього XXI століття – це офіс, обладнаний комп'ютерами, які мають доступ до інформаційного потоку.

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

Вирівнювання тексту в HTML по центру та по ширині

Вирівнювання тексту в HTML по центру, текст праворуч:

Результат:

Атрибути та значення

  • align = "left" - визначає вирівнювання тексту зліва(за замовчуванням).
  • align = "center" - вирівнює текст по центру.
  • align = "right" - вирівнює текст праворуч.

Вирівнювання | HTML відступ тексту

HTML текстта його відступ зліва сторінки

Виробимо відступ текстуліворуч двома способами:

Результат:

Переглянути у новому вікні.

Здрастуйте, шановні читачі блогу сайт. Сьогодні ми продовжуємо вивчати і у нас на черзі властивості text-decoration, vertical-align, text-align, text-indent та ряд інших, які допомагають оформляти зовнішній вигляд текстів у Html коді.

Минулої статті ми розглянули властивості, які призначаються для налаштування зовнішнього виглядушрифтів за .

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

Text-decoration, text-align, text-indent у CSS

Як же у Css працювати з текстом? Цілком логічно припустити, що для цієї мети існують спеціально призначені правила. Почнемо з text-align, яке є фактично заміною атрибуту align (він використовувався для вирівнювання вмісту, наприклад абзаців P або заголовків).

Він має всього чотири можливі значення:

Сенс залишається таким самим, як і був раніше. Text align- Це горизонтальне вирівнювання рядків. Застосовується це правило виключно лише для блокових елементів (параграфи, заголовки тощо.), тобто. тих тегах, у яких може з'явитися кілька рядків. Т.к. в малих елементах рядків може бути тільки один, то й сенсу використання в них text-align особливого немає.

Зрозуміло, що значення цього правила означають вирівнювання, відповідно: по лівому краю (left), по правому краю (right), по центру (center) та по ширині сторінки (Justify - одночасно по лівому та правому краю за рахунок збільшення відстані між словами) . Зрозуміло, що значення Justify варто використовувати для елементів хоча б з кількома рядками тексту, інакше видимого ефекту від цього не буде.

Для прикладу, я вирівняв попередній абзац по ширині (бачите у нього рівні межі і ліворуч, і праворуч), використовуючи:

Text-align: justify;

За умовчанням горизонтальне вирівнювання тексту здійснюється лівим краєм, тобто. спеціально писати text-align:left не потрібно, якщо, звичайно, раніше ви не задавали інше вирівнювання. Цей абзац я, до речі, вирівняв по центру (center) знову ж таки наочного прикладуАле тут, я думаю, все і так зрозуміло.

Наступне Css правило text-indentдозволяє встановити червоний рядок, наприклад, для тексту в тезі абзацу P. Відступ червоного рядка можна задати за допомогою вказівки величини (як зі знаком плюс, так і зі знаком мінус, використовуючи ) або за допомогою відсотків:

Від чого рахуються відсотки в text-indent? Від ширини області, яку відведено під текст. Тобто. Css правило text-indent:50% задасть червоний рядок рівний половині довжини цього рядка. Ну, а цей абзац якраз і є прикладом такого правила.

А можна, наприклад, встановити негативне значення червоного рядка в text-indent і тоді ми отримаємо приблизно те, що ви бачите в цьому абзаці. Для досягнення даного результатуя написав для тега абзацу P ось таке ось CSS правило:

Text-indent:-1em;

Ну, а звичайне використання text-indent (для завдання стандартного червоного рядка) може мати такий вигляд: text-indent:40px; (До речі, застосовано до цього параграфу). Це правило, як і розглянуте раніше text-align, застосовується тільки для блокових елементів, тобто. там, де може з'явитися кілька рядків (абзаци, заголовки тощо).

Так, тепер давайте перейдемо до text-decoration(оформлення за допомогою горизонтальної лінії), яке застосовується вже до всіх Html елементів (і малих, і блокових).

Воно може мати всього чотири значення:

Тобто. можна використовувати за допомогою text-decoration: надкреслення (overline), перекреслення (line-through) або підкреслення (underline), ну або взагалі нічого не використовувати (none). Деякі Html елементи вже мають за замовчуванням оформлення горизонтальною лінією, наприклад, (за замовчуванням вони підкреслюються).

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

Нюансом у використанні Css правила text-decoration є те, що можна буде прописати відразу три (іди два) значення для будь-якого Html елемента (опускаючи none) і в результаті ви отримаєте надкреслено-підкреслено-перекреслений фрагмент тексту(прикольно звучить і виглядає, чи не так?):

Text-decoration: underline overline line-through;

Значення для text decoration (якщо ви хочете використати одразу кілька з них) потрібно писати через символ пробіл.

Vertical-align - вертикальне вирівнювання

Далі у нас йде вертикальне вирівнювання – vertical-align. Практично для всіх елементів Html коді воно означає вирівнювання між собою малих елементів з текстом щодо їх базової лінії. Щоправда, це означає трохи інше — вирівнюватися по вертикалі буде весь контент, що у цих осередках.

Для Css правила vertical-align можна використовувати такі значення:

Рядки за промовчанням вирівнюються по базовій лінії. Ось дивіться, я застосував до цього фрагменту тексту збільшення шрифтуі ці два фрагменти вирівнялися за базовою (нижньою) лінією. А вертикальне вирівнювання за допомогою vertical-align якраз і призначене саме для зміни способу вирівнювання рядків.

Наприклад, якщо для того ж збільшеного фрагмента тексту пропишу vertical-align:baseline, то жодних змін не відбудеться, т.к. Значення baseline використовується для цього Css правила за промовчанням.

До речі, як значення для нього можна використовувати і числа, а напис vertical-align:0 означатиме те саме, що і vertical-align:baseline, тобто. Значення baseline еквівалентне нулю. Отже, якщо ми хочемо вказати який-небудь зсув у вертикальному вирівнюванні, то цей зсув будемо вказувати щодо базової лінії (або нуля).

Можна написати так:

Vertical-align:10px;

І отримаємо зсув фрагмента зі збільшеним шрифтом вгоруна 10 пікселів щодо базової лінії. Якщо напишемо негативне значення:

Vertical-align:-10px;

То отримаємо зсув фрагмента внизщодо базової лінії. З прикладів видно, що через зсув збільшилася висота рядка, щоб текст містився в ньому без наїзду на сусідній рядок. Зсув можна також задавати в Em і Ex, ну, і у відсотках, які будуть рахуватися від висоти лінії цього елемента (пам'ятаєте у минулій статті ми навчилися її задавати за допомогою).

Для вертикального вирівнювання вмісту осередків таблиць vertical-align слід використовувати значення Top і Bottom для отримання, відповідно, вирівнювання вмісту по верхній і нижній межі комірки (ну, а middle в комірці таблиці використовується як значення вертикального вирівнювання за умовчанням).

Для шрифтових елементів можна використовувати text-top, text-bottom, middle. Давайте для прикладу застосуємо до цьому фрагменту текстузначення:

Vertical-align: middle;

Що сталося в результаті? По базової лінії традиційного тексту вирівнялася середня лінія збільшеного фрагмента, тобто. ми отримали вертикальне вирівнювання середньої лінії. Для text-top та text-bottom буде все аналогічно. Ось так text-top, а так text-bottom.

Значення Css властивості vertical-align sub і super відповідають під- та надіндексу, які мали місце бути в чистому Html (до використання CSSвластивостей візуального оформлення).

Text-transform, letter-spacing, word-spacing та white-space

None використовується за промовчанням і означає, що символи в тексті змінюватися ніяк не будуть - як написано в Html, так і відображатимуться. Значення Uppercase для text-transform дозволить трансформувати всі літери фрагмента в великі ( приклад показаний у цій пропозиції, де використовувалося правило text-transform:uppercase, а спочатку літери були написані малі).

Значення lowercase для Css правила text-transform дозволить вам трансформувати всі символи фрагмента в малі, ну, а значення capitalize зробить усі перші літери слова великими ( приклад у цій пропозиції- Text-transform:capitalize). Тобто. за допомогою text-transform можна зробити все, що завгодно зі звичайним текстом, а потім запросто все повернути назад.

Тому, якщо у вас, наприклад, стоїть завдання зробити всі заголовки написаними лише великими літерами, то в Html пишіть їх зазвичай, а великими їх зробите вже в CSS через text-transform: uppercase. Потім, якщо ви вирішите щось поміняти назад, то досить внести тільки невелику зміну в стилі, а не вміст всіх 100500 заголовків на вашому сайті.

За замовчуванням і letter-spacing, і word-spacing мають значення Normal, чи це теж саме, що нуль (тобто відстань між символами і словами ніяк не змінюється). Величину зміни відстані в цих правилах можна буде вказувати тільки в пікселах, або Em або Ex, але ніяк не в відсотках.

Проте, можна використовувати як позитивні (розрідження символів чи слів), і негативні значення (зближення символів чи слів). Наприклад, можна «ось так розрідити символи у цій фразі»за допомогою наступного Css правила:

Letter-spacing:0.4em;

Або ж можна «ось так зблизити символи у цій фразі»за допомогою:

Letter-spacing:-1px;

Те саме можна сказати і про word-spacing з однією тільки різницею, що при цьому відстань буде змінюватися вже між словами, як, наприклад, у цій фразі, за допомогою ось такої CSS конструкції:

Word-spacing: 4em;

Аналогічно можна використовувати в word-spacing негативні значення зменшення відстані між словами.

Ну, і останнє на сьогодні Css правило, яке дозволяє певним чином оформляти текст у Html коді – це white-space. Відповідає воно за відображення пробілових символів на веб-сторінці, які були при написанні Html коду.

Як ви пам'ятаєте зі статті про , браузер при розборі коду поєднує всі прогалини, символи перенесення рядків та табуляції в один єдиний пробіл, і здійснює перенесення рядків на веб-сторінці саме за пробіловими символами, які мали місце в коді.

Так ось, white space може приймати одне із трьох значень:

Зрозуміло, що за замовчуванням використовується значення Normal, і в цьому випадку все відображається так, як я описав трохи вище. І це при використанні значення Pre ми отримаємо повну аналогію з використанням , тобто. на веб-сторінці текст буде відображено з усіма тими зайвими пробілами, які мали місце при написанні коду і перенесення браузер вже по них зробити не зможе.

Ну, а значення nowrapпросто заборонить браузеру переносити по тих пробілових символів, які він знайде всередині фрагмента з CSS правилом white-space:nowrap. Спробувати, як все це працює, ви зможете і самі, створивши простенький Html файл і уклавши будь-який фрагмент тексту в подібні теги:

фрагмент піддослідного тексту

Удачі вам! До швидких зустрічей на сторінках блогу сайт

Вам може бути цікаво

List style (type, image, position) - Css правила для налаштування зовнішнього вигляду списків у Html коді
Позиціонування за допомогою Z-index та CSS правило Cursor для зміни курсору миші
Padding, Margin та Border - задаємо в CSS внутрішніі зовнішні відступи, а так само рамки для всіх сторін (top, bottom, left, right)
Для чого потрібен CSS, як підключити каскадні таблиці стилів до Html документа та основи синтаксису цієї мови
Float і clear у CSS - інструменти блокової верстки
CSS - що це таке, як таблиці каскадних стилів підключаються до Html кодуза допомогою Style та Link
Одиниці розмірів (пікселі, Em та Ex) та успадкування правил у CSS
Селектори тега, класу (class), Id та універсальні, а також селектори атрибутів у сучасному CSS
Position (absolute, relative та fixed) - способи позиціонування Html елементівв CSS (правила left, right, top і bottom)
Background у CSS (color, position, image, repeat, attachment) - все для завдання кольору фону або фонової картинки Html елементів

Властивість text-align-last ( не плутати з HTML align) визначає, як вирівнюватиметься останній рядок блоку або рядок перед примусовим розривом. Це важливо, оскільки в останньому рядку абзацу, як правило, немає достатньо тексту, щоб заповнити весь простір.

У цій статті ми розглянемо всі аспекти, що стосуються властивості text-align-last , у тому числі значення, що приймаються, і підтримку браузерами.

Використання та значення, що приймаються

Застосовувати властивість text-align-last легко. Ось фрагмент коду для вирівнювання останнього рядка тексту з правого краю:

Intro-graph (text-align: justify; // Required for IE and Edge text-align-last: right; )

Властивість може набувати сім значень. Вам, ймовірно, відомі стандартні значення HTML text align: left, right та center. Вони вирівнюють текст в останньому рядку по правому краю, по лівому краю та по центру контейнера.

Наведений нижче приклад ілюструє різницю між цими трьома значеннями:

Подивитися приклад

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

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

Подивитися приклад

Вирівнювання останнього рядка тексту по лівому краю підходить для мов, які читаються зліва направо ( LTR), але це буде неправильно для мов RTL. У разі використання значень left чи right може викликати проблеми.

На щастя, можна використовувати значення start, щоб вирівняти текст по краю, з якого починається написання та читання. Це означає, що, встановивши для властивості text-align-last значення start , ви вирівняєте текст лівим краєм для мов LTR і правим краєм для мов RTL .

Також можна використовувати значення end , щоб вирівняти текст протилежним краєм від того, з якого починається написання і читання. Це відповідатиме значення right для мов LTR та left для мов RTL.

Подивитися приклад

Значення за промовчанням для цієї властивості auto . У разі його використання текст в останньому рядку вирівнюється відповідно до значення властивості HTML text align, якщо тільки для нього не встановлено значення justify. Інакше текст розподіляється по ширині контейнера, лише якщо для властивості text-justify встановлено значення distribute . В іншому випадку текст вирівнюється по краю, з якого починається написання та читання.

Важливі зауваження

Щоб text-align-last працювало, для властивості text-align має бути задано значення justify. Але це правило реалізовано тільки в IE та Edge. Firefox і Chrome властивість працює і без установки для text-align значення justify . У наведеному нижче прикладі текст повинен бути вирівняний праворуч в Edge та IE. В інших браузерах останні рядки абзаців будуть вирівнюватися відповідно до значення властивості text-align-last , а інші рядки будуть вирівняні праворуч.

Подивитись демо-версію

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

Властивість працює, навіть якщо в абзаці є примусовий розрив рядка, заданий за допомогою тега
або чогось у цьому роді. Майте на увазі, що ця властивість впливатиме на всі останні рядки тексту всередині зазначеного елемента, а не тільки на крайню. Наприклад, якщо текст всередині елемента article або div містить три абзаци, у кожному з них останній рядок вирівнюватиметься відповідно до значення властивості text-align-last , заданого для всього батьківського елемента.

Якщо потрібно вирівняти тільки останній рядок контенту, то можна використовувати селектори :last-child або :last-of-type . Візьміть код із наведеної нижче демо-версії як приклад:

article (text-align: justify;) article p:last-of-type (text-align-last: right; )

Він вирівнює останній рядок останнього абзацу нашої статті з правого краю. Інші рядки вирівнюються з урахуванням значення властивості HTML text align .

Подивитись демо-версію

Також можна використовувати інші селектори: :even і :odd для зміни вирівнювання.

Іноді абзац може складатися лише з одного рядка. У цьому випадку, якщо ви вказали значення і для якості text-align , і для якості text-align-last , то остання якість матиме пріоритет.

Розглянемо наступний фрагмент коду:

p (text-align: justify; ) p:nth-of-type(2) ( text-align-last: left; )

Якщо другий абзац має лише один рядок, текст вирівнюватиметься по лівому краю, тому що text-align-last матиме пріоритет. У наведеній нижче демо-версії показано даний код CSS у дії, а також кілька інших прикладів HTML align.

Подивитись демо-версію

Підтримка браузерами

Підтримка цієї властивості може бути включена за допомогою опції « Включити експериментальні функції веб-платформи» в Google Chromeі Opera, починаючи з версій 35 і 22 відповідно. Воно повністю підтримується в Chrome 47+ та Opera 34+.

Щоб використовувати цю властивість у Firefox, доведеться додавати префікс -moz-. Значення start і end не підтримуються IE. У той же час, Edge повністю підтримує цю властивість. Єдиний популярний браузер, який повністю не підтримує text-align-last – це Safari.

Модуль CSS-текстописує функції CSS, які керують перекладом вихідного тексту у форматований та переносом рядків. Різні властивості CSS забезпечують контроль над перетворенням регістру, обробкою прогалин, правилами перенесення та переносом тексту та рядків, вирівнюванням, інтервалами та відступами.

Основною одиницею тексту символ. Тим не менш, оскільки системи письма не завжди такі прості, як основний англійський алфавіт, те, чим насправді є символ, залежить від контексту, в якому використовується цей термін. Наприклад, у корейській системі листи кожне квадратне уявлення мови (наприклад, 1 = хань) вважатимуться символом. Однак квадратний символ дійсно складається з декількох літер, кожна з яких представляє фонему (наприклад, ㅎ = h, ㅏ = a, ㄴ = n), і кожна з них також може вважатися символом.

1. Перетворення тексту: властивості text-transform

Властивість текст-перетворення стилізує текст. Він не впливає на базовий вміст і не повинен впливати на вміст копіювання та вставки простого тексту.

Властивість успадковується.

Синтаксис

Text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: inherit; text-transform: initial;

2. Обробка прогалин та перенесення рядків: властивість white-space

Властивість white-space обробляє прогалини між словами та перенесення рядків усередині елемента.

Властивість успадковується.

white-space
Значення:
normal Значення за замовчуванням. Між словами вставляється лише по одному пропуску, додаткові пропуски відкидаються. Текст переноситься лише у разі потреби.
nowrap Забороняє перенесення рядків, крім застосування
.
pre Пробіли в тексті не ігноруються, браузер відображає додаткові пробіли та перенесення рядків.
pre-wrap Зберігає прогалини в тексті, роблячи розриви рядків там, де це потрібно.
pre-line Видаляє зайві прогалини, за винятком випадків
.
break-spaces Поведінка ідентична pre-wrap, за винятком того, що: будь-яка послідовність невилучених прогалин завжди займає місце, у тому числі в кінці рядка; можливість перенесення рядка існує після кожного проміжку, що не видаляється, у тому числі між пробілами.
initial
inherit

Синтаксис

White-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: preline; white-space: break-spaces; white-space: inherit; white-space: initial;

3. Налаштування табуляції: властивість tab-size

Властивість tab-size використовується для зміни величини відступу, який отримується за допомогою клавіші ТAB. Значення властивості ігноруються, коли встановлено одне з трьох значень pre-line, normal або nowrap властивості white-space.

Працює лише для елементів