text-indent
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
* Some parts of this feature may have varying levels of support.
Свойство text-indent определяет размер отступа (пустого места) перед строкой в текстовом блоке. По умолчанию это свойство управляет отступом только первой строкой блока, однако ключевые слова hanging и each-line могут изменить данное поведение.
Строка смещается по горизонтали к левому или к правому (при размещении текста справа налево) краю блока, в котором содержится элемент.
| Начальное значение | 0 |
|---|---|
| Применяется к | блочные контейнеры |
| Наследуется | да |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, как указан или абсолютная длина, а также любые ключевые слова |
| Animation type | длина, проценты или calc(); |
Синтаксис
/* Ключевые слова */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;
/* значение <length> */
text-indent: 3mm;
text-indent: 40px;
/* значение <percentage> зависит от ширины блока*/
text-indent: 15%;
/* международные значения */
text-indent: inherit;
text-indent: initial;
text-indent: unset;
Значения
<length>-
Отступ определяется как абсолютная длина (
<length>). Возможны также отрицательные значения. Статья про значение длины (<length>) расскажет больше про возможные единицы измерения. <percentage>-
В процентном (
<percentage>) соотношении отступ зависит от ширины всего блока, внутри которого находится строка. each-lineЭкспериментальная возможность (экспериментальное значение)-
Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса.
hangingЭкспериментальная возможность (экспериментальное значение)-
Отступ добавляется ко всем строкам, кроме первой.
Формальный синтаксис
text-indent =
[ <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;
}
Спецификации
| Specification |
|---|
| CSS Text Module Level 3 # text-indent-property |
Совместимость с браузерами
Loading…