Які значення може набувати властивість text align. Оформлення тексту за допомогою CSS

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

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

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

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

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

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

Результат:

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

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

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

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

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

Результат:

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

Модуль 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; 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.

Працює лише для елементів і <pre>Для інших блокових елементів значення завжди дорівнюватиме одиниці. Значення властивості, зазначені в одиницях довжини, підтримуються лише у Chrome 42+.</p> <p>Властивість успадковується.</p> <p><b>Синтаксис</b></p><p>Tab-size: 0; tab-size: 10px; tab-size: inherit; tab-size: initial;</p><h3>4. Розрив рядка та межі слів</h3> <p>Коли вміст на рядковому рівні розбивається на рядки, він розбивається на лінійні блоки. Таке розбиття називається розрив рядка.</p> <p>Коли рядок переривається через явні елементи управління розривом рядка, наприклад, символ нового рядка або тега <br>, початку чи кінця блоку - це примусовий розрив рядка.</p> <p>Якщо рядок обривається через перенесення вмісту, коли браузер створює необов'язкові розриви рядків, щоб вписати вміст, це м'яке перенесення.</p> <h4>4.1. Правила розриву для літер: властивість word-break</h4> <p>Властивість word-break визначає можливості м'якого перенесення літерами, тобто. коли можна розбивати рядки тексту. Зокрема, воно контролює, чи існує можливість м'якого перенесення між суміжними друкарськими літерними одиницями та/або цифрами. Це не впливає на правила, що регулюють можливості м'якого перенесення, створені пробілами.</p> <p>Властивість успадковується.</p> <p><b>Синтаксис</b></p><p>Word-break: normal; word-break: break-all; word-break: keep-all; word-break: inherit; word-break: initial;</p><h4>4.2. Розрив рядка: line-break</h4> <p>Властивість line-break визначає правила перенесення рядків, що застосовуються всередині елемента, зокрема те, як перенесення взаємодіє зі розділовими знаками та символами.</p> <p>Властивість успадковується.</p> <table class="t1"><tr><th colspan="2">line-break</th> </tr><tr><td>Значення:</td> <td> </td> </tr><tr><td>auto</td> <td>Браузер визначає набір обмежень на розрив рядка, які можуть змінюватись в залежності від довжини лінії, наприклад, використовувати менш суворий набір правил розриву рядка для коротких рядків. Значення за промовчанням.</td> </tr><tr><td>loose</td> <td>Розбиває текст, використовуючи найменше обмежує набір правил перенесення рядків. Зазвичай використовується для коротких рядків, наприклад, у газетах.</td> </tr><tr><td>normal</td> <td>Розбиває текст, використовуючи найпоширеніший набір правил перенесення рядків.</td> </tr><tr><td>strict</td> <td>Розбиває текст, використовуючи строгий набір правил перенесення рядків.</td> </tr><tr><td>initial</td> <td>Встановлює значення властивості значення за замовчуванням.</td> </tr><tr><td>inherit</td> <td>Наслідує значення властивості від батьківського елемента.</td> </tr></table><p><b>Синтаксис</b></p><p>Line-break: auto; line-break: loose; line-break: normal; line-break: strict; line-break: inherit; line-break: initial;</p><h4>4.3. Розташування переносів: властивість hyphens</h4> <p>Властивість hyphens визначає, чи дозволено використання переносів для створення можливостей м'якого перенесення всередині текстового рядка.</p> <p>Розстановка переносів - це контрольоване розбиття слів, при якому їм зазвичай не дозволяється розриватися, щоб покращити розташування абзаців. Як правило, розбиття слів відбувається по складових або морфемних кордонах і за візуальної вказівки на поділ (зазвичай шляхом вставки дефісу, ‐). У деяких випадках переноси можуть також змінити написання слова. У будь-якому випадку, перенесення слів є лише ефектом рендерингу: він не повинен впливати ні на вміст документа, ні на вибір тексту чи пошук.</p> <p>CSS Text Level 3 не визначає точні правила переносу слів, тому рекомендується вибирати відповідні мови точки переносу.</p> <p>Властивість успадковується.</p> <table class="t1"><tr><th colspan="2">hyphens</th> </tr><tr><td>Значення:</td> <td> </td> </tr><tr><td>none</td> <td>Слова не переносяться, навіть якщо символи всередині слова явно визначають можливості перенесення.</td> </tr><tr><td>manual</td> <td>Слова переносяться лише в тих місцях, де всередині слова є символи, які явно вказують на можливість перенесення слів (спеціальний символ). Значення за промовчанням.</td> </tr><tr><td>auto</td> <td>Слова можуть бути розбиті на можливості переносу, які визначаються автоматично відповідним мовою ресурсом переносу на додаток до тих, які явно вказані умовним дефісом. Необхідно встановити мову свого контенту (наприклад, використовуючи HTML-атрибут lang або заголовок HTTP Content-Language), щоб отримати правильне автоматичне перенесення слів.</td> </tr><tr><td>initial</td> <td>Встановлює значення властивості значення за замовчуванням.</td> </tr><tr><td>inherit</td> <td>Наслідує значення властивості від батьківського елемента.</td> </tr></table><p><b>Синтаксис</b></p> <p>Hyphens: none; hyphens: manual; hyphens: auto; hyphens: inherit; hyphens: initial;</p><h4>4.4. Переповнення блоку-обертки: властивість overflow-wrap/word-wrap</h4> <p>Властивість overflow-wrap (або його застаріле ім'я word-wrap) вказує, чи може нерозривний рядок перерватися в недозволених точках, щоб запобігти переповненню лінійного блоку. Працює у разі, коли властивість white-space дозволяє перенесення.</p> <p>Властивість успадковується.</p> <table class="t1"><tr><th colspan="2">overflow-wrap, word-wrap</th> </tr><tr><td>Значення:</td> <td> </td> </tr><tr><td>normal</td> <td>Нерозривні рядки можуть розриватися лише у дозволених точках розриву. Значення за промовчанням.</td> </tr><tr><td>break-word</td> <td> </td> </tr><tr><td>anywhere</td> <td>Нерозривна послідовність символів може бути розбита в довільній точці, якщо рядок немає інших прийнятних точок розриву. Впливає лише на візуальне відображення, не торкаючись вихідного тексту. У точці розриву рядка символ перенесення не додається. Можливості м'якого перенесення, представлені будь-де, враховуються при розрахунку власних розмірів мінімального вмісту.</td> </tr><tr><td>initial</td> <td>Встановлює значення властивості значення за замовчуванням.</td> </tr><tr><td>inherit</td> <td>Наслідує значення властивості від батьківського елемента.</td> </tr></table><p><b>Синтаксис</b></p><p>Overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere; overflow-wrap: inherit; overflow-wrap: initial;</p><h3>5. Вирівнювання та виключення рядків</h3> <p>Вирівнювання та виключення рядків контролюють, як вбудований контент розподіляється в лінійному блоці.</p> <h4>5.1. Короткий запис для вирівнювання тексту: властивості text-align</h4> <p>Блок тексту є набір лінійних блоків. Властивість text-align задає властивості text-align-all і text-align-last та описує, як блоки на рівні рядка в кожному лінійному блоці вирівнюються щодо початкової та кінцевої сторін лінійного блоку. Значення, відмінні від justify-all або match-parent, присвоюються text-align-all і скидаються в text-align-last на auto.</p> <p>Властивість успадковується.</p> <table class="t1"><tr><th colspan="2">text-align</th> </tr><tr><td>Значення:</td> <td> </td> </tr><tr><td>start</td> <td>Вміст на рівні рядка вирівнюється початковим краєм лінійного блоку. Значення за промовчанням.</td> </tr><tr><td>end</td> <td>Вміст на рівні рядка вирівнюється кінцевим краєм лінійного блоку.</td> </tr><tr><td>left</td> <td>Вміст на рівні рядка вирівнюється лівим краєм рядка лінійного блоку. У вертикальних системах писемності це фізичний верх чи низ, залежно від орієнтації тексту.</td> </tr><tr><td>right</td> <td>Вміст на рівні рядка вирівнюється праворуч рядка лінійного блоку. У вертикальних системах писемності це фізичний верх чи низ, залежно від орієнтації тексту.</td> </tr><tr><td>center</td> <td>Вміст на рівні рядка центрується всередині лінійного блоку.</td> </tr><tr><td>justify</td> <td>Текст вирівнюється по ширині лінійного блоку, щоб точно заповнити поле рядка, притискаюсь до лівого та правого країв батьківського елемента. Якщо інше не вказано в text-align-last, останній рядок перед примусовим розривом або кінець блоку вирівнюється спочатку. Пробіли між словами та літерами розподіляються таким чином, щоб довжина всіх рядків дорівнювала. <a href="/providers/kak-pochistit-aimak-ot-nenuzhnyh-failov-kak-ochistit-i-uskorit-mak-s/">Різні браузери</a>можуть збільшити як відступи між словами, і інтервали між буквами.</td> </tr><tr><td>justify-all</td> <td>Встановлює text-align-all і text-align-last justify , також вирівнюючи останній рядок.</td> </tr><tr><td>match-parent</td> <td>Значення поводиться так само, як inherit за винятком того, що успадковане значення start або end інтерпретується щодо значення direction (або вихідного блоку, якщо немає батька) і призводить до обчисленого значення left або right .</td> </tr><tr><td>inherit</td> <td>Наслідує значення властивості від батьківського елемента.</td> </tr></table><p><b>Синтаксис</b></p><p>Text-align: start; text-align: end; text-align: left; text-align: right; text-align: center; text-align: justify; text-align: justify-all; text-align: match-parent; text-align: inherit;</p><h4>5.2. Вирівнювання тексту за промовчанням: властивість text-align-all</h4> <p>Властивість text-align-all — скорочений варіант властивості text-align визначає вирівнювання всіх рядків вмісту в контейнері блоку, крім останніх рядків, перевизначених значенням text-align-last . Приймає значення start, end, left, right, center, justify та match-parent.</p> <p>Властивість успадковується.</p> <p><b>Синтаксис</b></p><p>Text-align-all: start; text-align-all: end; text-align-all: left; text-align-all: right; text-align-all: center; text-align-all: justify; text-align-all: match-parent; text-align-all: inherit;</p><h4>5.3. Вирівнювання останнього рядка: властивість text-align-last</h4> <p>Властивість text-align-last визначає, як вирівнюється останній рядок блоку або рядка безпосередньо перед примусовим розривом рядка.</p> <p>Якщо встановлено значення auto , вміст у відповідному рядку вирівнюється по text-align-all , якщо тільки для text-align-all не налаштовано justify — у цьому випадку він вирівнюється на початку блоку. Усі інші значення інтерпретуються як описано для text-align.</p> <p>Приймає значення auto, start, end, left, right, center, justify та match-parent.</p> <p>Властивість успадковується.</p> <p><b>Синтаксис</b></p><p>Text-align-last: auto; text-align-last: start; text-align-last: end; text-align-last: left; text-align-last: right; text-align-last: center; text-align-last: justify; text-align-last: match-parent;</p><h3>6. Проміжки</h3> <p>CSS дозволяє контролювати проміжки між словами та типографськими символами за допомогою властивостей word-spacing та letter-spacing.</p> <h4>6.1. Проміжки між словами: властивість word-spacing</h4> <p>Властивість word-spacing визначає додатковий інтервал між словами. <br>Встановлює проміжки між словами. Можна використовувати позитивні та негативні значення. При негативному значенні слова можуть накладатися одне одного.</p> <p>На значення word-spacing впливає значення властивості text-align у разі вирівнювання тексту по ширині.</p> <p>Властивість успадковується.</p> <p><b>Синтаксис</b></p><p>Word-spacing: normal; word-spacing: 1px; word-spacing: 0.2em; word-spacing: 50%; word-spacing: inherit; word-spacing: initial;</p><h4>6.2. Трекінг: властивість letter-spacing</h4> <p>Властивість letter-spacing визначає додатковий інтервал, або трекінг між суміжними друкарськими символами. Міжлітерний інтервал є доповненням до word-spacing. Залежно від чинних правил вирівнювання користувачі можуть додатково збільшувати або зменшувати відстань між типографськими символьними одиницями для вирівнювання тексту.</p> <p>Властивість успадковується.</p> <p><b>Синтаксис</b></p><p>Letter-spacing: normal; letter-spacing: 0.1em; letter-spacing: 2px; letter-spacing: inherit; letter-spacing: initial;</p><h3>7. Відступ першого рядка: властивість text-indent</h3> <p>Властивість text-indent задає відступ, який застосовується до рядків вбудованого вмісту в блоці. Відступ обробляється як поле, що застосовується до початкового краю лінійного блоку. <br>Якщо в першому рядку блокового елемента є зображення, то воно зрушиться разом з рештою тексту.</p> <p>Властивість успадковується.</p> <p><b>Синтаксис</b></p><p>Text-indent: 5mm; text-indent: 20px; text-indent: 5%; text-indent: 2em each-line; text-indent: 2em hanging; text-indent: inherit; text-indent: initial;</p> <table class="data browser"><tr class="br"><td>CSS</td> <td colspan="2"><a href="/hangs/ne-rabotaet-explorer-exe-windows-10-problemy-s-internet-explorer-diagnostika-i-ispravlenie/">Internet Explorer</a> </td> <td>Chrome</td> <td>Opera</td> <td>Safari</td> <td>Firefox</td> <td>Android</td> <td>iOS</td> </tr><tr class="sp"><td>2.1 </td> <td class="warn" title="Internet Explorer до версії 7.0 включно не підтримує значення inherit">6.0+ </td> <td class="yes sline">8.0+ </td> <td class="yes">1.0+ </td> <td class="yes">3.5+ </td> <td class="yes">1.0+ </td> <td class="yes">1.0+ </td> <td class="yes">1.0+ </td> <td class="yes">1.0+ </td> </tr><tr class="sp"><td>3 </td> <td colspan="2" class="no"> </td> <td class="yes">2.0+ </td> <td class="yes">11.6+ </td> <td class="yes">3.1+ </td> <td class="yes">3.6+ </td> <td class="yes">2.1+ </td> <td class="yes">2.0+ </td> </tr></table><h3>Коротка інформація</h3> <h3>Версії CSS</h3> <h3>Значення</h3>center Вирівнювання тексту по центру. Текст розміщується по центру горизонталі вікна браузера або контейнера, де розташований текстовий блок. Рядки тексту наче нанизуються на невидиму вісь, яка проходить центром веб-сторінки. Подібний спосіб вирівнювання активно використовується в заголовках та різних підписах, на кшталт підмалювальних, він надає офіційного та солідного вигляду оформленню тексту. У всіх інших випадках вирівнювання центром застосовується рідко з тієї причини, що читати великий обсяг такого тексту незручно. justify Вирівнювання по ширині, що означає одночасне вирівнювання по лівому та правому краю. Щоб зробити це браузер в цьому випадку додає пробіли між словами. left Вирівнювання тексту ліворуч. У цьому випадку рядки тексту вирівнюється по лівому краю, а правий край розташовується «драбинкою». Такий спосіб вирівнювання є найпопулярнішим на сайтах, оскільки дозволяє користувачеві легко відшукувати поглядом новий рядок та комфортно читати великий текст. right Вирівнювання тексту з правого краю. Цей спосіб вирівнювання виступає у ролі антагоніста попереднього типу. А саме, рядки тексту дорівнюють праворуч, а лівий залишається «рваним». Через те, що лівий край не вирівняний, а саме з нього починається читання нових рядків, такий текст читати важче, ніж, якби він був вирівняний лівим краєм. Тому вирівнювання з правого краю застосовується зазвичай для коротких заголовків обсягом трохи більше трьох рядків. Ми не розглядаємо специфічні сайти, де текст доводиться читати праворуч, там можливо подібний спосіб вирівнювання і стане в нагоді. auto Не змінює положення елемента. inherit Наслідує значення батька. start Аналогічно значенню left , якщо текст йде ліворуч і right , коли текст йде справа наліво. end Аналогічно right , якщо текст йде ліворуч направо і left , коли текст йде справа наліво. <p>HTML5 CSS2.1 IE Cr Op Sa Fx</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>text-align</title> <style> div { border: 1px solid black; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ margin-bottom: 5px; /* Отступ снизу */ } #left { text-align: left; } #right { text-align: right; } #center { text-align: center; } .content { width: 75%; /* Ширина слоя */ background: #fc0; /* Цвет фона */ } </style> </head> <body> <div id="left"><div class="content">Вирівнювання по лівому краю</div></div> <div id="center"><div class="content">Вирівнювання по центру</div></div> <div id="right"><div class="content">Вирівнювання з правого краю</div></div> </body> </html> </p><p>Результат цього прикладу показано на рис. 1.</p> <p>Мал. 1. Вирівнювання тексту у браузері Safari</p> <p>Internet Explorer до версії 7.0 включно дещо інакше трактує <a href="/tv/1s-skd-vychislyaemye-polya-primery-shema-komponovki-dannyh-1s-skd-obrashchenie-k/">даний приклад</a>, ніж інші браузери, вирівнюючи як текст, а й блоки (рис. 2).</p> <p><img src='https://i0.wp.com/htmlbook.ru/files/images/css/css_text-align_2.png' width="100%" loading=lazy loading=lazy></p> <p>Мал. 2. Вирівнювання тексту в <a href="/failure/ubiraem-integraciyu-download-master-v-brauzerah-internet-explorer-chrome-firefox/">браузері Internet</a> Explorer 7</p> <h3>Об'єктна модель</h3> <p>document.getElementById("elementID ").style.textAlign</p> <h3>Браузери</h3> <p>IE до версії 7.0 включно вирівнює як вміст блокового елемента, а й сам елемент.</p> <p>Зазвичай автор сайту сам вирішує, які літери будуть великими, а які малими, виходячи з правил правопису та власних уподобань. Проте процес зміни регістрів символів можна автоматизувати, використовуючи властивість <span>text-transform</span>. Ця властивість може приймати чотири значення:</p><ul><li>none – текст пишеться без змін;</li> <li> <span>capitalize</span>- кожне слово буде починатися з великого символу;</li> <li>lowercase - всі символи стають малими (нижній регістр);</li> <li> <span>uppercase</span>- всі символи стають великими (верхній регістр).</li> </ul><p>Наприклад, наступне правило вказує, що заголовок H1 повинен виводитися великими літерами:</p><p>H1 (text-transform: uppercase;)</p><p>Автоматичну зміну регістру символів зручно задавати для абревіатур, назв елементів, заголовків та інших <span>елементів тексту</span>, де потрібно писати великі або малими символами.</p> <h4>Прикраса тексту: якість text-decoration</h4><p>Властивість <span>text-decoration</span>дозволяє задати додаткове оформлення тексту. Значеннями даної властивості є константи <span>none, underline, overline, line-through</span>і <span>blink</span>, що дозволяє відобразити звичайний текст, провести лінію над, під або через текст, а також зробити миготливий текст. Приклад використання різних значень цієї властивості наведено малюнку 11.4 .</p><p> <br><b>Мал. 11.4.</b></p><p>Найбільш поширеним застосуванням властивості <span>text-decoration</span>є зміна підкреслення посилань, що використовується за умовчанням. Наприклад, таке правило вказує, що посилання повинні підкреслюватися:</p><p>A:link (text-decoration: underline;)</p> <h4>Інтервал між словами: властивість word-spacing</h4><p>Щоб встановити інтервал між словами в тексті, використовується властивість word-spacing. Значення цієї властивості можна задати за допомогою <a href="/browsers/proverka-klyuchevyh-slov-konkurentov-analiz-reklamy-konkurentov-v/">ключового слова</a> normal , яке використовується за замовчуванням і задає стандартний інтервал для поточного шрифту. Для завдання інтервалу на додаток до стандартного можна вказати значення будь-яких доступних одиницях CSS, причому значення може бути і негативним.</p><p>Так, наступне правило збільшує інтервал між словами в заголовку H1 на 1em:</p><p>H1 (word-spacing: 1em;)</p> <h4>Вирівнювання тексту: властивість text-align</h4><p>Вирівнюванням називається розміщення лівого або правого краю блоку тексту вздовж невидимої вертикальної лінії. Для вирівнювання тексту використовується властивість text-align. Допустимими значеннями даної властивості є left, right, center і justify, що задають вирівнювання по лівому краю, правому краю, центром і шириною відповідно.</p><p>Наступне правило встановлює вирівнювання по центру всіх елементів, що містяться в елементі DIV:</p><p>DIV (text-align: center;)</p> <h4>Інтерліньяж: властивість line-height</h4><p>Інтерліньяжем називається відстань між базовими лініями близьких один до одного рядків. За звичайних обставин відстань між рядками залежить від виду та розміру шрифту та автоматично визначається браузером. Але це значення можна змінити за допомогою властивості line-height . Задане за замовчуванням значення normal змушує браузер обчислювати відстань між рядками автоматично. Будь-яке число більше за нуль сприймається як множник від розміру шрифту поточного тексту. Як значення даної властивості можна також використовувати будь-які одиниці довжини, прийняті в CSS. Дозволяється також використовувати відсотковий запис, причому в цьому випадку за 100% приймається висота шрифту. Негативне значення міжрядкової відстані не допускається.</p> <h4>Інтервал між літерами: властивість letter-spacing</h4><p>Браузер автоматично підбирає інтервали між символами, виходячи з розміру та типу шрифту. У деяких випадках необхідно підкоригувати відстань між літерами. Для керування міжлітерним інтервалом використовується властивість letter-spacing. Як значення цієї властивості можуть використовуватися будь-які одиниці довжини, прийняті в CSS, проте рекомендується використовувати відносні одиниці, засновані на розмірі шрифту (em і ех). На відміну від міжрядкового інтервалу, властивість letter-spacing припускає використання <a href="/windows-7/tns-indeks-ne-mozhet-byt-otricatelnym-znacheniem-opredelenie-indeksa-teplovoi/">негативного значення</a>, проте у разі треба переконатися, що зберігається читабельність тексту.</p><p>Наступне правило збільшує інтервал між символами у заголовку H1 на 0.5em.</p> <p>Властивість text-align-last ( <span>не плутати з HTML align</span>) визначає, як вирівнюватиметься останній рядок блоку або рядок перед примусовим розривом. Це важливо, оскільки в останньому рядку абзацу, як правило, немає достатньо тексту, щоб заповнити весь простір.</p> <p>У цій статті ми розглянемо всі аспекти, що стосуються властивості text-align-last , у тому числі значення, що приймаються, і підтримку браузерами.</p> <h2>Використання та значення, що приймаються</h2> <p>Застосовувати властивість text-align-last легко. Ось фрагмент коду для вирівнювання останнього рядка тексту з правого краю:</p> <p>Intro-graph (text-align: justify; // Required for IE and Edge text-align-last: right; )</p> <p>Властивість може набувати сім значень. Вам, мабуть, відомі стандартні значення <a href="/application/kod-podcherkivaniya-html-podcherknutyi-tekst-html-css-text-underline-position/">HTML text</a> align:left, right і center. Вони вирівнюють текст в останньому рядку праворуч, лівим краєм і центром контейнера.</p> <p>Наведений нижче приклад ілюструє різницю між цими трьома значеннями:</p> <p>Подивитися приклад</p> <p>Четверте значення, justify, вирівнює останній рядок таким чином, що текст рівномірно розподіляється по всій ширині контейнера. Це досягається за рахунок додавання відповідної кількості прогалин між словами. Залежно від кількості тексту цю властивість можна використовувати, щоб повністю заповнити простір в останньому рядку, але не отримати занадто великі розриви між словами.</p> <p>Текст у другому абзаці також розподілено за шириною, але оскільки останній рядок містить лише одне слово, воно розташовується ліворуч.</p> <p>Подивитися приклад</p> <p>Вирівнювання останнього рядка тексту по лівому краю підходить для мов, які читаються зліва направо ( <span>LTR</span>), але це буде неправильно для мов RTL. У разі використання значень left чи right може викликати проблеми.</p> <p>На щастя, можна використовувати значення start, щоб вирівняти текст по краю, з якого починається написання та читання. Це означає, що, встановивши для властивості text-align-last значення start , ви вирівняєте текст лівим краєм для мов LTR і правим краєм для мов RTL .</p> <p>Також можна використовувати значення end , щоб вирівняти текст протилежним краєм від того, з якого починається написання і читання. Це відповідатиме значення right для мов LTR та left для мов RTL.</p> <p>Подивитися приклад</p> <p>Значення за промовчанням для цієї властивості auto . У разі його використання текст в останньому рядку вирівнюється відповідно до значення властивості HTML text align, якщо тільки для нього не встановлено значення justify. Інакше текст розподіляється по ширині контейнера, тільки якщо для властивості text-justify встановлено значення distribute . В іншому випадку текст вирівнюється по краю, з якого починається написання та читання.</p> <h3>Важливі зауваження</h3> <p>Щоб text-align-last працювало, для властивості text-align має бути задано значення justify. Але це правило реалізовано тільки в IE та Edge. Firefox і Chrome властивість працює і без установки для text-align значення justify . У наведеному нижче прикладі текст повинен бути вирівняний праворуч в Edge та IE. В інших браузерах останні рядки абзаців будуть вирівнюватися відповідно до значення властивості text-align-last , а інші рядки будуть вирівняні праворуч.</p> <p>Подивитись демо-версію</p> <p>Якщо ми не задаємо для text-align значення align justify HTML, результат виглядає менш привабливо. Тому ви, найімовірніше, встановите розподіл тексту за шириною.</p> <p>Властивість працює, навіть якщо в абзаці є примусовий розрив рядка, заданий за допомогою тега <br>або чогось у цьому роді. Майте на увазі, що ця властивість впливатиме на всі останні рядки тексту всередині зазначеного елемента, а не тільки на крайню. Наприклад, якщо текст всередині елемента article або div містить три абзаци, у кожному з них останній рядок вирівнюватиметься відповідно до значення властивості text-align-last , заданого для всього батьківського елемента.</p> <p>Якщо потрібно вирівняти тільки останній рядок контенту, то можна використовувати селектори :last-child або :last-of-type . Візьміть код із наведеної нижче демо-версії як приклад:</p> <p>article (text-align: justify;) article p:last-of-type (text-align-last: right; )</p> <p>Він вирівнює останній рядок останнього абзацу нашої статті з правого краю. Інші рядки вирівнюються на основі значення властивості HTML text align.</p> <p>Подивитись демо-версію</p> <p>Також можна використовувати інші селектори: :even і :odd для зміни вирівнювання.</p> <p>Іноді абзац може складатися лише з одного рядка. У цьому випадку, якщо ви вказали значення і для якості text-align , і для якості text-align-last , то остання якість матиме пріоритет.</p> <p>Розглянемо наступний фрагмент коду:</p> <p>p (text-align: justify; ) p:nth-of-type(2) ( text-align-last: left; )</p> <p>Якщо другий абзац має лише один рядок, текст вирівнюватиметься по лівому краю, тому що text-align-last матиме пріоритет. У наведеній нижче демо-версії показано цей код CSS у дії, а також кілька інших <a href="/application/recepty-html5-pogruzhaemsya-v-koding-pod-html5-na-konkretnyh-primerah-resursy/">прикладів HTML</a> align.</p> <p>Подивитись демо-версію</p> <h3>Підтримка браузерами</h3> <p>Підтримка цієї властивості може бути включена за допомогою опції « <span>Включити експериментальні функції веб-платформи</span>» в <a href="/application/the-flash-player-chrome-is-not-updated-we-are-struggling-with-failures-flash-player-in-google-chrome/">Google Chrome</a>і Opera, починаючи з версій 35 і 22 відповідно. Воно повністю підтримується в Chrome 47+ та Opera 34+.</p> <p>Щоб використовувати цю властивість у Firefox, доведеться додавати префікс -moz-. Значення start і end не підтримуються IE. У той же час, Edge повністю підтримує цю властивість. Єдиний популярний браузер, який повністю не підтримує text-align-last – це Safari.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <footer class="entry-footer"> </footer> </article> <nav class="navigation post-navigation" role="navigation"> <h2 class="screen-reader-text">Схожі записи</h2> <div class="nav-links"> <div class="nav-previous"><a href="/not-included/huavei-dzh-3-huawei-gr5---tehnicheskie-harakteristiki-tehnicheskie-harakteristiki-huawei-y5-ii/" rel="prev">Huawei GR5 - Технічні характеристики</a></div> <div class="nav-previous"><a href="/laptops/gde-v-telefone-explay-sotovye-telefony-explay-titanium-backup-i-instrukciya-po/" rel="prev">Де у телефоні explay. Мобільні телефони Explay. Titanium Backup та інструкція зі звільнення пам'яті смартфона Explay</a></div> <div class="nav-previous"><a href="/not-included/skachat-programmu-dlya-napisaniya-javascript-kollekciya-besplatnyh/" rel="prev">Колекція безкоштовних та корисних інструментів для розробників Javascript</a></div> <div class="nav-previous"><a href="/windows-7/kak-podklyuchit-avtomobilnyi-usilitel-svoimi-rukami-vse-o-vklyuchenii/" rel="prev">Все про включення динаміків Схема підключення 4 динаміків на 1 канал</a></div> <div class="nav-previous"><a href="/software-installation/prezentacii-po-informatike-informatika-osnovnye-ponyatiya-informatiki/" rel="prev">Презентації з інформатики</a></div> </div> </nav> <div class="wpdiscuz_top_clearing"></div> <div id="wpdiscuz-loading-bar" class="wpdiscuz-loading-bar wpdiscuz-loading-bar-unauth"></div> <div class="row"> <div class="col-12"> <div class="sample-posts"> <div class="big-slider js-big-slider-3"> </div> </div> </div> </div> </main> </div> <div class="col-md-4 col-lg-3 widget-area d-flex flex-column" id="right-single-sidebar" role="complementary"> <div class="fix-sidebar-wrap f-grow-1"> <div class="fix-sidebar"> <div class="sidebar-scroll"> <aside id="category-posts-8" class="widget cat-post-widget"> <h3 class="widget-title section-title"><span>Головне за сьогодні</span></h3> <ul id="category-posts-8-internal" class="category-posts-internal"> <li class='cat-post-item'><a class="cat-post-thumbnail cat-post-none" href="/application/1c-ispolzovanie-sinhronnyh-metodov-na-kliente-zapreshcheno-pochemu-voznikaet/" title="Чому виникає помилка"Использование синхронных методов на клиенте запрещено"?"><span class="cat-post-crop" style="width:330px;height:155px;"><img style="margin-top:-11.4453125px;height:177.890625px;clip:rect(auto,341.4453125px,auto,11.4453125px);width:auto;max-width:initial;" width='330' height='177.890625' src="/uploads/13d989e9a67df0ae7a6fe2a914db3640.jpg" class="attachment-330x155 size-330x155 wp-post-image" alt="Чому виникає помилка"Использование синхронных методов на клиенте запрещено"?" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy loading=lazy></span></a> <a class="post-title" href="/application/1c-ispolzovanie-sinhronnyh-metodov-na-kliente-zapreshcheno-pochemu-voznikaet/" rel="bookmark">Чому виникає помилка "Використання синхронних методів на клієнті заборонено"?</a> <p class="post-date">2024-07-26 00:23:17</p> </li> <li class='cat-post-item'><a class="cat-post-thumbnail cat-post-none" href="/laptops/professiya-yurist-plyusy-i-minusy-opisanie-funkcii-i-obyazannostei/" title="Професія"юрист": плюсы и минусы, описание функций и обязанностей Сводный анализ стоимости услуг"><span class="cat-post-crop" style="width:330px;height:155px;"><img style="margin-top:-11.4453125px;height:177.890625px;clip:rect(auto,341.4453125px,auto,11.4453125px);width:auto;max-width:initial;" width='330' height='177.890625' src="/uploads/a1da86b10e73d21d2adaf70bfd870601.jpg" class="attachment-330x155 size-330x155 wp-post-image" alt="Професія"юрист": плюсы и минусы, описание функций и обязанностей Сводный анализ стоимости услуг" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy loading=lazy></span></a> <a class="post-title" href="/laptops/professiya-yurist-plyusy-i-minusy-opisanie-funkcii-i-obyazannostei/" rel="bookmark">Професія "юрист": плюси та мінуси, опис функцій та обов'язків Зведений аналіз вартості послуг</a> <p class="post-date">2024-07-25 00:23:18</p> </li> <li class='cat-post-item'><a class="cat-post-thumbnail cat-post-none" href="/routers/lichnyi-opyt-kak-bystro-i-bez-lishnih-zatrat-obnovit-izmenennuyu-konfiguraciyu-lichnyi-opyt-kak-bystr/" title="Особистий досвід: як швидко та без зайвих витрат оновити змінену конфігурацію Оновлення 1с із збереженням змін"><span class="cat-post-crop" style="width:330px;height:155px;"><img style="margin-top:-11.4453125px;height:177.890625px;clip:rect(auto,341.4453125px,auto,11.4453125px);width:auto;max-width:initial;" width='330' height='177.890625' src="/uploads/f63ae173b52fc20e0d96ab636514b1f6.jpg" class="attachment-330x155 size-330x155 wp-post-image" alt="Особистий досвід: як швидко та без зайвих витрат оновити змінену конфігурацію Оновлення 1с із збереженням змін" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy loading=lazy></span></a> <a class="post-title" href="/routers/lichnyi-opyt-kak-bystro-i-bez-lishnih-zatrat-obnovit-izmenennuyu-konfiguraciyu-lichnyi-opyt-kak-bystr/" rel="bookmark">Особистий досвід: як швидко та без зайвих витрат оновити змінену конфігурацію Оновлення 1с із збереженням змін</a> <p class="post-date">2024-07-25 00:23:18</p> </li> <li class='cat-post-item'><a class="cat-post-thumbnail cat-post-none" href="/failure/1s-kak-dopisat-v-xml-fail-formirovanie-faila-xml-prostaya/" title="1с як дописати в xml файл"><span class="cat-post-crop" style="width:330px;height:155px;"><img style="margin-top:-11.4453125px;height:177.890625px;clip:rect(auto,341.4453125px,auto,11.4453125px);width:auto;max-width:initial;" width='330' height='177.890625' src="/uploads/9a3e7c7f91e4df67f485dfa3e3b80cd5.jpg" class="attachment-330x155 size-330x155 wp-post-image" alt="1с як дописати в xml файл" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy loading=lazy></span></a> <a class="post-title" href="/failure/1s-kak-dopisat-v-xml-fail-formirovanie-faila-xml-prostaya/" rel="bookmark">1с як дописати в xml файл</a> <p class="post-date">2024-07-25 00:23:18</p> </li> <li class='cat-post-item'><a class="cat-post-thumbnail cat-post-none" href="/hard-drives/otslezhivanie-posylok-wish-post-arrive-at-destination-country-waiting-for-customs-clearance-chto-eto/" title="Arrive at destination country, waiting for customs clearance що це означає?"><span class="cat-post-crop" style="width:330px;height:155px;"><img style="margin-top:-11.4453125px;height:177.890625px;clip:rect(auto,341.4453125px,auto,11.4453125px);width:auto;max-width:initial;" width='330' height='177.890625' src="/uploads/880d121e4afa5fdff4a8d60ad0f02e61.jpg" class="attachment-330x155 size-330x155 wp-post-image" alt="Arrive at destination country, waiting for customs clearance що це означає?" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy loading=lazy></span></a> <a class="post-title" href="/hard-drives/otslezhivanie-posylok-wish-post-arrive-at-destination-country-waiting-for-customs-clearance-chto-eto/" rel="bookmark">Arrive at destination country, waiting for customs clearance що це означає?</a> <p class="post-date">2024-07-25 00:23:18</p> </li> <li class='cat-post-item'><a class="cat-post-thumbnail cat-post-none" href="/technology/zip-arhiv-iz-neskolkih-chastei-raspakovka-mnogotomnogo-rar-arhiva-v-windows-kak/" title="Розпакування багатотомного RAR-архіву в Windows"><span class="cat-post-crop" style="width:330px;height:155px;"><img style="margin-top:-11.4453125px;height:177.890625px;clip:rect(auto,341.4453125px,auto,11.4453125px);width:auto;max-width:initial;" width='330' height='177.890625' src="/uploads/00c0f2a7c61f2d7d59eb60af29c45348.jpg" class="attachment-330x155 size-330x155 wp-post-image" alt="Розпакування багатотомного RAR-архіву в Windows" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy loading=lazy></span></a> <a class="post-title" href="/technology/zip-arhiv-iz-neskolkih-chastei-raspakovka-mnogotomnogo-rar-arhiva-v-windows-kak/" rel="bookmark">Розпакування багатотомного RAR-архіву в Windows</a> <p class="post-date">2024-07-24 00:22:40</p> </li> <li class='cat-post-item'><a class="cat-post-thumbnail cat-post-none" href="/mobile-device/pereformatirovanie-failov-vob-v-avi-s-fleshki-format-faila-vob/" title="Формат файлу VOB: переваги та недоліки"><span class="cat-post-crop" style="width:330px;height:155px;"><img style="margin-top:-11.4453125px;height:177.890625px;clip:rect(auto,341.4453125px,auto,11.4453125px);width:auto;max-width:initial;" width='330' height='177.890625' src="/uploads/757533fd3b4f761cfcd3009049460dee.jpg" class="attachment-330x155 size-330x155 wp-post-image" alt="Формат файлу VOB: переваги та недоліки" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy loading=lazy></span></a> <a class="post-title" href="/mobile-device/pereformatirovanie-failov-vob-v-avi-s-fleshki-format-faila-vob/" rel="bookmark">Формат файлу VOB: переваги та недоліки</a> <p class="post-date">2024-07-24 00:22:40</p> </li> <li class='cat-post-item'><a class="cat-post-thumbnail cat-post-none" href="/viruses/podklyuchenie-mikrofona-k-pk-kak-podklyuchit-mikrofon-k-kompyuteru-ili-noutbuku/" title="Як підключити мікрофон до комп'ютера або ноутбука - програми та налаштування онлайн Програма для підключення мікрофона до ноутбука"><span class="cat-post-crop" style="width:330px;height:155px;"><img style="margin-top:-11.4453125px;height:177.890625px;clip:rect(auto,341.4453125px,auto,11.4453125px);width:auto;max-width:initial;" width='330' height='177.890625' src="/uploads/2d370aa6c581d77317f37ea51dd093fe.jpg" class="attachment-330x155 size-330x155 wp-post-image" alt="Як підключити мікрофон до комп'ютера або ноутбука - програми та налаштування онлайн Програма для підключення мікрофона до ноутбука" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy loading=lazy></span></a> <a class="post-title" href="/viruses/podklyuchenie-mikrofona-k-pk-kak-podklyuchit-mikrofon-k-kompyuteru-ili-noutbuku/" rel="bookmark">Як підключити мікрофон до комп'ютера або ноутбука - програми та налаштування онлайн Програма для підключення мікрофона до ноутбука</a> <p class="post-date">2024-07-24 00:22:40</p> </li> <li class='cat-post-item'><a class="cat-post-thumbnail cat-post-none" href="/failure/s-pomoshchyu-kakih-programm-mozhno-otkryt-fail-dwg-chto-takoe-rasshirenie/" title="Що таке розширення DWG?"><span class="cat-post-crop" style="width:330px;height:155px;"><img style="margin-top:-11.4453125px;height:177.890625px;clip:rect(auto,341.4453125px,auto,11.4453125px);width:auto;max-width:initial;" width='330' height='177.890625' src="/uploads/fbca1b837a4394b2cb40c0f7f5cd8f50.jpg" class="attachment-330x155 size-330x155 wp-post-image" alt="Що таке розширення DWG?" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy loading=lazy></span></a> <a class="post-title" href="/failure/s-pomoshchyu-kakih-programm-mozhno-otkryt-fail-dwg-chto-takoe-rasshirenie/" rel="bookmark">Що таке розширення DWG?</a> <p class="post-date">2024-07-24 00:22:40</p> </li> <li class='cat-post-item'><a class="cat-post-thumbnail cat-post-none" href="/not-included/kak-postavit-parol-na-istoriyu-v-yandekse-kak-postavit-parol/" title="Як встановити пароль на різні браузери?"><span class="cat-post-crop" style="width:330px;height:155px;"><img style="margin-top:-11.4453125px;height:177.890625px;clip:rect(auto,341.4453125px,auto,11.4453125px);width:auto;max-width:initial;" width='330' height='177.890625' src="/uploads/9a20a9b44c238d7d045bbf6f4ff27d57.jpg" class="attachment-330x155 size-330x155 wp-post-image" alt="Як встановити пароль на різні браузери?" sizes="(max-width: 330px) 100vw, 330px" / loading=lazy loading=lazy></span></a> <a class="post-title" href="/not-included/kak-postavit-parol-na-istoriyu-v-yandekse-kak-postavit-parol/" rel="bookmark">Як встановити пароль на різні браузери?</a> <p class="post-date">2024-07-23 00:22:16</p> </li> </ul> </aside> <aside id="custom_html-3" class="widget_text widget widget_custom_html"> <div class="textwidget custom-html-widget"> <div id="wabape1" style="height:500px;width:280px;" align="center"></div> </div> </aside> </div> </div> </div> </div> </div> </div> </div> <div class="wrapper" id="wrapper-footer"> <div class="container"> <div class="row"> <div class="col-12 p-0"> <div class="wrapper-fluid wrapper-navbar" id="wrapper-navbar"> <a class="skip-link screen-reader-text sr-only" href="#content">Перейти до змісту</a> <nav class="navbar navbar-light navbar-expand-lg p-0"> <div class="container navbar-bottom-line search-wrap js-search-wrap"> <div class="nav-search-content d-flex justify-content-between align-items-center js-search-content"> <div class="search-open"> <i class="fa fa-search"></i> </div> <div class="nav-search-form f-grow-1 px-4"> <form method="get" id="" action="/" role="search"> <div class="input-group"> <input class="field form-control" id="s" name="s" type="text" placeholder="Пошук"> <span class="input-group-btn"> <input class="submit text-uppercase btn btn-primary" id="" name="submit" type="submit" value="Пошук"> </span> </div> </form> </div> <div class="search-open js-search-btn"> <i class="fa fa-times"></i> </div> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdownАщщеук" aria-controls="navbarNavDropdownАщщеук" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="hidden-lg-up search-open js-search-btn"> <i class="fa fa-search"></i> </div> <div id="navbarNavDropdownАщщеук" class="collapse navbar-collapse text-uppercase"> <ul id="main-menu" class="navbar-nav"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category nav-item menu-item-"><a title="Технології" href="/category/technology/" class="nav-link">Технології</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category nav-item menu-item-"><a title="Провайдери" href="/category/providers/" class="nav-link">Провайдери</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category nav-item menu-item-"><a title="Гальмує" href="/category/inhibits/" class="nav-link">Гальмує</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category nav-item menu-item-"><a title="Програми" href="/category/application/" class="nav-link">Програми</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category nav-item menu-item-"><a title="Зависає" href="/category/hangs/" class="nav-link">Зависає</a></li> </ul> </div> <div class="hidden-md-down search-open js-search-btn"> <i class="fa fa-search"></i> </div> </div> </nav> </div> </div> </div> <div class="row"> <div class="col-md-12"> <footer class="site-footer" id="colophon"> <div class="site-info"> </div> <div class="d-flex justify-content-center"> <div class="" style="padding: 30px 0"> <a href="/" class="navbar-brand custom-logo-link" rel="home" itemprop="url"><img src="/images/logo.png" class="img-fluid" alt="Все про комп'ютери та їх ремонт" itemprop="logo" / loading=lazy loading=lazy></a> </div> </div> </footer> </div> </div> <div class="row"> <ul id="menu-futer-sajt-info" class="col-12 site-info-menu"> <li class="menu-item type-custom object-custom "><a>© 2024 virtuapc.ru — Все про комп'ютери та їх ремонт</a></li> <li class="menu-item type-post_type object-page "><a href="">Реклама на сайті</a></li> <li class="menu-item type-post_type object-page "><a href="/sitemap.xml">Карта сайту</a></li> <li class="menu-item type-post_type object-page "><a href="/feedback/">Контакти</a></li> <li class="menu-item type-post_type object-page "><a href="">Політика конфіденційності</a></li> </ul> </div> </div> </div> </div> <script type='text/javascript' src='https://virtuapc.ru/wp-content/themes/understrap/js/zvpager.js?ver=4.9.1'></script> <script type='text/javascript' src='https://virtuapc.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script> <script type='text/javascript' src='https://virtuapc.ru/wp-content/plugins/email-subscribers/widget/es-widget.js?ver=4.9.1'></script> <script type='text/javascript' src='https://virtuapc.ru/wp-content/plugins/email-subscribers/widget/es-widget-page.js?ver=4.9.1'></script> <script type='text/javascript' src='https://virtuapc.ru/wp-content/themes/understrap/js/theme.min.js?ver=0.6.5'></script> <script type='text/javascript' src='https://virtuapc.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> </body> </html>