Отступ первой строки css: text-indent | htmlbook.ru

text-indent | CSS | WebReference

Устанавливает величину отступа первой строки блока текста (например, для абзаца <p>). Воздействия на все остальные строки не оказывает. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.

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

Синтаксис

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) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div {
  text-indent: {{ playgroundValue }}px;
}

Пример

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

Рис. 1. Применение свойства text-indent

Объектная модель

Объект.style.textIndent

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

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

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Текст и шрифт

См. также

• Свойства текста в CSS

text-indent ⚡️ HTML и CSS с примерами кода

Свойство text-indent устанавливает величину отступа первой строки блока текста (например, для абзаца <p>).

Воздействия на все остальные строки не оказывается. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.

Демо

• hanging-punctuation
• hyphens
• letter-spacing
• line-break
• overflow-wrap
• paint-order
• tab-size
• text-align
• text-align-last
• text-indent
• text-justify
• text-size-adjust
• text-transform
• white-space
• word-break
• word-spacing

• letter-spacing
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-thickness
• text-decoration-skip
• text-decoration-skip-ink
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-indent
• text-rendering
• text-shadow
• text-underline-position
• text-transform
• white-space
• word-spacing

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/* <length> values */
text-indent: 3mm;
text-indent: 40px;
/* <percentage> value
relative to the containing block width */
text-indent: 15%;
/* Keyword values */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;
/* Global values */
text-indent: inherit;
text-indent: initial;
text-indent: unset;

Значения

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

Значение по-умолчанию: 0

Применяется к блочным элементам

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

• CSS Text Level 3
• CSS Level 2 (Revision 1)
• CSS Level 1

Поддержка браузерами

Can I Use css-text-indent? Data on support for the css-text-indent feature across the major browsers from caniuse.com.

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!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>

html — Отступ текста после первой строки в абзаце

спросил 13 лет, 1 месяц назад

Изменено 4 года, 1 месяц назад

Просмотрено 57 тысяч раз

— Репортер агентства Reuters в районе Суркрод в провинции Нангархар, где жители деревни, по словам жителей, имели место рейды, сообщил, что афганская полиция открыла огонь по толпе после того, как некоторые из них начали бросать камни в здания местного правительства.

В приведенном выше абзаце я хотел бы использовать CSS, чтобы сделать все строки после первой строки автоматически отступом, чтобы каждая строка оставалась сразу после — в первой строке.

HTML

 
 — корреспондент Reuters в Сурхродском районе провинции Нангархар, где
жители деревни заявили, что рейды имели место, заявили, что афганская полиция открыла огонь по толпе
после того, как некоторые из них начали бросать камни в здания местного самоуправления.
 

Это похоже на элемент списка с установленной позицией списка снаружи, но я не хочу использовать список.

Какой самый простой способ добиться этого эффекта? Чем меньше лишних html-разметок, тем лучше.

Всем большое спасибо.

• html
• css
• отступ
• отступ текста

Вам нужно отступ текста . Обычно text-indent выдвигает первую строку внутрь, но если вы дадите ей минус-число и используете положительное поле, вы можете добиться нужного эффекта.

 отступ текста: -10px;
поле слева: 10px
 

 р {
  отступ текста: -1em;
  отступ слева: 1em;
}
 

Не используется прямо сейчас, но если вы активируете флаг Экспериментальной веб-платформы в Chrome, вы можете использовать text-indent:1em каждая строка; , который должен делать именно то, что вы хотите.

отступ текста на MDN

Я заметил, что на встроенных элементах это может работать по-другому. Мне нужен был «выступ» (первая строка левее, чем остальная часть абзаца), и я заметил, что приведенные выше предложения сделали противоположное — создали обычный отступ (где первая строка дальше ПРАВИЛЬНЕЕ, чем другие строки). Вот что работает для встроенного элемента, например, тега «a»:

 #myDiv ul li { margin-left:1em; }
#myDiv ul li {color:#333; отступ текста: 0.5em; поле слева:-1em; высота строки: 1; }
 

Я также задал содержащему элементу блочного уровня отступ в 1em, так что там, где начинаются встроенные элементы «a» с их отрицательными отступами, они на самом деле позиционировались именно там, где I вещи должны были быть изначально, прежде чем возиться, чтобы сделать «аутдент».

Надеюсь, это кому-нибудь поможет! Я также заметил, что в моем встроенном элементе нет контроля размера самого текстового отступа….

Пример JSFiddle

Основываясь на ответе @kennytm; если вы хотите выровнять моноширинный текст, используйте ch единиц вместо em единиц. Например:

 
ВЫБРАТЬ Поле1, Поле2, Поле3, Поле4, Поле5, Поле6, Поле7, Поле8, Поле9, Поле10
 

с ch на основе заполнения / отрицательных отступов

 .query-select {
  отступ слева: 8ch;
  отступ текста: -7ch;
}
 

Будет отображаться (в зависимости от ширины страницы) как:

 ВЫБЕРИТЕ Поле1, Поле2, Поле3, Поле4, Поле5, Поле6,
         Поле7, Поле8, Поле9, Поле10
 

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Требуется, но не отображается

Опубликовать как гость

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

html — Отступ первой строки абзаца, но только если он занимает несколько строк

спросил 1 год, 2 месяца назад

Изменено 1 год, 2 месяца назад

Просмотрено 517 раз

Я хочу сделать отступ в первой строке абзаца (точно такой же, как text-indent свойство CSS делает), но только для тех абзацев, которые занимают несколько строк. Если абзац помещается в одну строку, я не хочу, чтобы он был с отступом.

Можно ли добиться подобного результата?

 р {
 отступ текста: 20px;
 максимальная ширина: 350 пикселей;
} 

 
Это довольно длинный абзац, занимающий несколько строк. По этой причине я хочу, чтобы его первая строка была с отступом (как и должно быть). 
Это короткие абзацы.
Я не хочу, чтобы они были с отступом.
Если они не занимают несколько строк.
 

• html
• css
• абзац
• отступ текста

Вот хакерская идея, требующая дополнительной оболочки:

 p {
 максимальная ширина: 350 пикселей;
 высота строки: 1.2em; /* высота одной строки */
}
.е {
  дисплей: гибкий; /* гибкий контейнер, чтобы можно было использовать 100% высоты*/
}
/* псевдоэлемент для создания отступа*/
.e p: перед {
  содержание:"";
  плыть налево;
  ширина: 20 пикселей;
  /* 0px, если 100% (высота p) меньше или равно 1,2 em (одна строка)
     1px, если 100% больше, чем одна строка
  */
  высота: зажим (0px, 100% - 1.2em, 1px)
} 

 
Это довольно длинный абзац, занимающий несколько строк. По этой причине я хочу, чтобы его первая строка была с отступом (как и должно быть).
Это короткие абзацы.
Я не хочу, чтобы они были с отступом. 
Если они не занимают несколько строк.
 

Интерактивная демонстрация, в которой вы можете изменить размер, чтобы увидеть магию в игре:

 p {
 высота строки: 1.2em; /* высота одной строки */
}
.е {
  дисплей: гибкий; /* гибкий контейнер, чтобы можно было использовать 100% высоты*/
  переполнение: скрыто;
  граница: сплошная 1px;
  изменить размер: по горизонтали;
  ширина: 350 пикселей;
}
/* псевдоэлемент для создания отступа*/
.e p: перед {
  содержание:"";
  плыть налево;
  ширина: 20 пикселей;
  /* 0px, если 100% (высота p) меньше или равно 1,2 em (одна строка)
     1px, если 100% больше, чем одна строка
  */
  высота: зажим (0px, 100% - 1.2em, 1px)
} 

 
Это довольно длинный абзац, занимающий несколько строк. По этой причине я хочу, чтобы его первая строка была с отступом (как и должно быть).
 

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Требуется, но не отображается

Опубликовать как гость

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.