В text-indentсобственности определяет , сколько горизонтальный текст пространства должно быть перемещен до начала первой строки текстового содержимого элемента. Интервал рассчитывается от начального края элемента контейнера на уровне блока.
Начальный край обычно находится слева, но может быть правым, если в режиме справа налево, как свойство direction.
text-indentСвойство наследуется , если это указано на блоке элемента, который означает , что она будет влиять на встроенный блок элементы потомков , а также. Имея дело с дочерними элементами inline-block, вы можете заставить их это сделать text-indent: 0;.
Синтаксис
text-indent: | | inherit && ( hanging || each-line ) p ( text-indent: 1.5em; )Обычный вариант использования был бы просто стилистическим. Отступ в первой строке абзаца старомоден и может вызвать такое ощущение. Его можно использовать вместо интервала после абзацев в качестве альтернативного визуального индикатора, хотя интервал, вероятно, в целом более читабелен.
Другой распространенный вариант использования - «замена изображения», когда текст выталкивается из элемента через текстовый отступ и скрытое переполнение.
висит
hangingявляется экспериментальным и неофициальное значение для text-indentсвойства. Он инвертирует строки с отступом. По сути, он делает отступ для каждой строки, кроме первой, что приводит к какой-то висячей пунктуации.
Это значение является флагом, идущим вместе с общим значением, например длиной.
каждая строка
each-lineявляется экспериментальным и неофициальное значение для text-indentсвойства. Идея состоит в том, чтобы делать отступ для каждой строки после принудительного разрыва строки (с помощью символа a
Это значение является флагом, идущим вместе с общим значением, например длиной.
Демо
См. Отступ текста Pen Криса Койера (@chriscoyier) на CodePen.
Поддержка браузера
Базовая поддержка
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| любой | любой | любой | 3.5+ | 3+ | любой | любой |
значение подвешивания
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| никто | никто | никто | никто | никто | никто | никто |
значение каждой строки
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| никто | никто | никто | никто | никто | никто | никто |