Свойство text-indent
определяет размер отступа (пустого места) перед строкой в текстовом блоке. По умолчанию это свойство управляет отступом только первой строкой блока, однако ключевые слова hanging
и each-line
могут изменить данное поведение.
Строка смещается по горизонтали к левому или к правому (при размещении текста справа налево) краю блока, в котором содержится элемент.
Начальное значение | 0 |
---|---|
Применяется к | блочные контейнеры |
Наследуется | да |
Проценты | ссылается на ширину содержащего блока |
Отображение | визуальный |
Обработка значения | процент, как указан или абсолютная длина, а также любые ключевые слова |
Animation type | длина, проценты или calc(); |
Канонический порядок | Длина или процент до ключевых слов, если присутствуют оба. Если присутствуют несколько ключевых слов, они появляются в том же порядке, как и в формальной грамматике. |
Синтаксис
/* значение <length> */
text-indent: 3mm;
text-indent: 40px;
/* значение <percentage> зависит от ширины блока*/
text-indent: 15%;
/* значения ключевых слов */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;
/* международные значения */
text-indent: inherit;
text-indent: initial;
text-indent: unset;
Значения
<length>
- Отступ определяется как абсолютная длина (
<length>
). Возможны также отрицательные значения. Статья про значение длины (<length>
) расскажет больше про возможные единицы измерения. <percentage>
- В процентном (
<percentage>
) соотношении отступ зависит от ширины всего блока, внутри которого находится строка. each-line
(экспериментальное значение)- Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса.
hanging
(экспериментальное значение)- Отступ добавляется ко всем строкам, кроме первой.
Формальный синтаксис
<length-percentage> && hanging? && each-line?где
<length-percentage> = <length> | <percentage>
Простые примеры отступов
HTML
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
CSS
p {
text-indent: 5em;
background: powderblue;
}
Пример со значением <percentage>
HTML
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
CSS
p {
text-indent: 30%;
background: plum;
}
Спецификация
Спецификация | Статус | Комментарий |
---|---|---|
CSS Text Module Level 3 Определение 'text-indent' в этой спецификации. |
Рабочий черновик | Добавили ключевые слова hanging и each-line |
CSS Transitions Определение 'text-indent' в этой спецификации. |
Рабочий черновик | Определяет text-indent как анимированное свойство |
CSS Level 2 (Revision 1) Определение 'text-indent' в этой спецификации. |
Рекомендация | Подробно определяет поведение блочно-строчных элементов (display: inline-block) и незаполненных блоков (anonymous block boxes) |
CSS Level 1 Определение 'text-indent' в этой спецификации. |
Рекомендация | Начальное определение |
Совместимость с браузерами
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Характеристика | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Базовая поддержка | 1.0 (1.7 или ранее) | 1.0 | (Да) | 3.0 | 3.5 | 1.0 (85) |
hanging |
Нет[1] | Нет | Нет | Нет | Нет | Нет |
each-line |
Нет[1] | Нет | Нет | Нет | Нет | Нет |
Характеристика | Firefox Mobile (Gecko) | Android | Edge | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Базовая поддержка | 1.0 (1.9.2) | ? | (Да) | ? | ? | ? |
hanging |
Нет | Нет | Нет | Нет | Нет | Нет |
each-line |
Нет | Нет | Нет | Нет | Нет | Нет |
[1] Gecko это не поддерживает. Смотрите баг 784648.