text — indent
С помощью text — indent можно создать «красную строку» — добавить отступ для первой строки абзаца.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 5 июля 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство text — indent управляет отступом первой строки текста: либо вытягивает строку за пределы абзаца, либо утягивает её внутрь. Используется для выделения начала абзаца при плотном наборе без отступов между абзацами.
Строка смещается по горизонтали относительно начала строки.
Пример
Скопировать ссылку «Пример» Скопировано
Значение в пикселях:
div text-indent: 20px;>div text-indent: 20px; >
Процент рассчитывается от ширины блока:
div text-indent: 15%;>div text-indent: 15%; >
Значения ключевых слов:
Пример корректно отображается только в Safari. Он выглядит следующим образом:
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Ключевые слова
Скопировать ссылку «Ключевые слова» Скопировано
Ключевые слова являются экспериментальными и официально не предусмотрены в спецификации CSS.
- hanging — инвертирует отступы в строках. Добавляет отступ в каждой строке, кроме первой.
- each — line — добавляет отступы в каждой строке после принудительного разрыва строки (с помощью ).
Единицы измерения
Скопировать ссылку «Единицы измерения» Скопировано
Значение свойства можно задать в любых единицах измерения включая проценты. Во втором случае размер отступа будет зависеть от ширины блока, содержащего текст. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.
Как сделать отступ между словами в css
Обычно про наборе текста для формирования пространства между словами используется пробел. Иногда это расстояние необходимо скорректировать. В CSS существует свойство word-spacing положительное значение которого прибавит к текущему пробелу указанное значение, тем самым увеличивая отступ между словами, и отрицательное, соответственно — убавит.
Пример ниже добавит к каждому пробелу дополнительные 15px.
Добавим к словам дополнительный отступ
p word-spacing: 15px; > text-indent
Свойство text-indent определяет размер отступа (пустого места) перед строкой в текстовом блоке. По умолчанию это свойство управляет отступом только первой строкой блока, однако ключевые слова hanging и each-line могут изменить данное поведение.
Строка смещается по горизонтали к левому или к правому (при размещении текста справа налево) краю блока, в котором содержится элемент.
| Начальное значение | 0 |
|---|---|
| Применяется к | блочные контейнеры |
| Наследуется | да |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, как указан или абсолютная длина, а также любые ключевые слова |
| Animation type | длина, проценты или calc(); |
Синтаксис
/* значение */ text-indent: 3mm; text-indent: 40px; /* значение зависит от ширины блока*/ 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;
Значения
each-line Экспериментальная возможность (экспериментальное значение)
Отступ добавляется к первой строке блочного контейнера, а также к каждой строке после принудительного разрыва строки (Enter и br), но не влияет на строки после мягкого переноса.
hanging Экспериментальная возможность (экспериментальное значение)
Отступ добавляется ко всем строкам, кроме первой.
Формальный синтаксис
text-indent =
[ (en-US) ] (en-US) && (en-US)
hanging? (en-US) && (en-US)
each-line? (en-US)
=
| (en-US)
Простые примеры отступов
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; >
text-indent
Устанавливает величину отступа первой строки блока текста (например, для абзаца
). Воздействия на все остальные строки не оказывается. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.
Синтаксис
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.
inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
text-indent Огневое нападение бывает пяти видов: первое, когда сжигают людей; второе, когда сжигают запасы; третье, когда сжигают обозы; четвертое, когда сжигают склады; пятое, когда сжигают отряды.
Сунь-цзы, Искусство войны. Перевод Николай Конрад.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства text-indent
Объектная модель
[window.]document.getElementById(» elementID «).style.textIndent