Атрибут text-indent в CSS

9 червня 2022 р.761

Зміст

Встановлює величину відступу першого рядка блоку тексту (наприклад, для абзацу < p>). Впливу на решту рядків не надає. Дозволяється негативне значення для створення виступу першого рядка, але слід перевірити, щоб текст не виходив за межі вікна браузера.

Коротка інформація

Значення за замовчуванням	0
Успадковується	Так
Застосовується	До блокових елементів
Анімується	Так

Синтаксис

<code>text-indent: <розмір> | <відсотки>

Позначення

	Опис	Приклад
<тип>	Вказує тип значення.	<розмір>
A && B	Значення повинні виводитися в вказаному порядку.	<розмір> && <колір>
A \| B	Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B).	normal \| small-caps
A \|\| B	Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку.	width \|\| count
[ ]	Групує значення.	[ crop \|\| cross ]
*	Повторювати нуль або більше разів.	[,<час>]*
+	Повторювати один або більше разів.	<число>+
?	Вказаний тип, слово або група не є обов'язковим.	inset?
{A, B}	Повторювати не менше A, але не більше B разів.	<радіус>{1,4}
#	Повторювати один або більше разів через кому.	<час>#

Значення

В якості значень приймаються будь-які одиниці довжини, прийняті в CSS — наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. При заданні значення у відсотках відступ першого рядка обчислюється в залежності від ширини блоку. Допустимо використовувати негативні значення, але при цьому в різних браузерах можлива поява помилок.

text-long field-label-above">

Пісочниця

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

div { text-indent: <span class="playground-active">{{ playgroundValue }}px</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-indent</title> <style> P { text-indent: 1.5em; /* Відступ першого рядка */
text-align: justify; /* Вирівнювання за шириною */
}
</style>
</head>
<body> <p>Вогневий напад буває п'яти видів: перше, коли спалюють людей; друге, коли спалюють запаси; третє, коли спалюють обози; четверте, коли спалюють склади; п'яте, коли спалюють загони.</p> <p>Сунь-цзи, Мистецтво війни. Переклад Микола Конрад.</p>
</body>
</html>

Результат цього прикладу показаний на рис. 1.

Застосування властивості text-indent

Мал. 1. Застосування властивості text-indent

Об'єктна модель

Об'єкт.style.textIndent

Специфікація

Специфікація	Статус
CSS Text Module Level 3	Робочий проект
CSS Level 2 Revision 1 ( CSS 2.1)	Рекомендація
CSS Level 1	Рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери


3	12	1	3.5	1	1

table>

Браузери

У таблиці браузерів застосовуються такі позначення.

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

Число вказує версію браузера, починаючи з якої властивість підтримується.

"field field-name-field-css-cat field-type-taxonomy-term-reference field-label-hidden">

Текст і шрифт

Див. також

Властивості тексту в CSS


1	1	4	1