`Text-indent` - Property CSS

text-indent

Summary of characteristics of the `text-indent` property

Quick description

Defines the indentation of the first line of paragraphs.

Status

Standard

Applies to

Block containers.

Usable for

HTML

Predefined values

each-line | hanging

Percentages

Computed relative to the size of the parent in the inline direction.

Initial value

0px

Inherited by default

Yes.

Animation type

Computed value: during an animation, the text-indent property gradually changes from one value to another.

Canonical order

Per grammar: serialization in the order of syntax.

W3C Module

CSS Text Module

References (W3C)

🡇

🡅

CSS Text Module Level 4

Document status: WD (Working Draft)

CSS Text Module Level 3

Document status: CR (Candidate Recommendation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Document status: REC (Recommendation)

Cascading Style Sheets specification - Version 1

Document status: DEPR (Old specification, declared obsolete or superseded)

Syntax diagram of `text-indent`.

Syntax diagram of the text-indent property.
The links in the diagram provide more details about the values.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

lengthis a numerical value followed by one of CSS dimension units.
% It is a percentage calculated based on the width of the element.

Description of the `text-indent` property.

The property text-indent sets the indentation of the first line of text of the element. The indentation can be a positive or negative value. In the latter case, the first line will encroach on the left margin.
Here is an example of text formatted with paragraph indents:

The indentation, also called a 'withdrawal' by printing professionals, is especially common in the French language, and when the text is justified. The paragraph indentation can be hanging or protruding depending on whether the first line of the paragraphs is shifted to the left or to the right.

On web pages, indentation is used less often, in favor of increased spacing between each paragraph.

Line breaks forced by a br tag do not create an indentation on the following line.

Indentation is applied on the start side of lines, that is, on the left for Latin languages, and more generally for all languages written from left to right (property direction set to ltr), unless the property direction is set to rtl. Indentation will be on the right for languages written from right to left (Arabic languages, for example).

`text-indent` and the writing mode depending on the language.

text-indent always applies on the start side. For Latin languages, this will be on the left; for Arabic languages, the indentation is on the right.

Values for `text-indent`.

text-indent: 15px;

The first line indent is set to the specified value. This can be positive or negative, and must be followed by a unit of measurement (see CSS dimension units).

If the value is expressed as a percentage, it will be calculated relative to the width of the element.

Note: forced line breaks (br tags) do not cause indentation.

Indentation is intended to visually indicate the beginning of paragraphs. Here is a paragraph whose first line is indented.⮐
This line, which follows a forced line break, is not indented.

text-indent:15px;
text-indent: 15px hanging; ⚠

The indentation applies to all lines except the first line of each paragraph.

The hanging value is still poorly recognized by browsers (2026). You can achieve a similar effect by setting a left inner margin (padding-left) to a certain value, and the first-line indent to the same value in negative.

Hanging indentation leaves the first line unchanged and applies an indentation to all the other lines.⮐
Unfortunately, for now, few browsers are able to render the hanging.

text-indent:15px hanging;
text-indent: 15px each-line; ⚠

With this value, the indent applies both to the first line of paragraphs and to all lines that follow a line break forced by a br tag.

The each-line value is still not widely supported by browsers (2026).

The each-line value applies indentation to the first lines of paragraphs as well as to lines following a forced line break.⮐
This value is not supported by many browsers.

text-indent:15px each-line;
text-indent: initial; (0px) text-indent: inherit; text-indent: revert; text-indent: revertLayer; text-indent: unset;

Common values are presented on these pages: initial, inherit, revert, revert-layer, unset.

Animation of the `text-indent` property.

In the example below, the property text-indent is animated between 0 and 80% of the paragraph's width. In principle, the indent never reaches such high values.

Haec igitur Epicuri non probo, inquam. De cetero vellem equidem aut ipse doctrinis fuisset instructior est enim, quod tibi ita videri necesse est, non satis politus iis artibus, quas qui tenent, eruditi appellantur aut ne deterruisset alios a studiis. quamquam te quidem video minime esse deterritum.

Manipulating the `text-indent` property programmatically.

With Javascript, change the value of `text-indent`.

In JavaScript, here is how to modify the value of text-indent. Two syntaxes are possible: the first with the property name written in kebab-case (a hyphen to separate words), the second with camel-case notation (a capital letter to separate words).


	let el = document.getElementById('id');
	el.style['text-indent'] = '3ex';
	// or
	let el = document.getElementById('id');
	el.style.textIndent = '3ex';

With Javascript, read the value of `text-indent`.

The property must have been applied directly to the element itself using the style attribute, and not through a CSS selector. The value is returned exactly as it was set, in the same unit.


	let el = document.getElementById('id');
	let value = el.style['text-indent'];
	// or
	let el = document.getElementById('id');
	let value = el.style.textIndent;

With Javascript, read the computed value of `text-indent`.

The computed value is the one that results from the evaluation of the relative units and the possible consideration of inherited values.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('text-indent');

With JQuery, change the value of `text-indent`.


 $('#id').css('text-indent', '3ex');
 // or
 $('#id').css('textIndent', '3ex');

With JQuery, read the computed value of `text-indent`.


	let value = $('#id').css('text-indent');

Try it yourself.

The buttons below apply the entered value to the property text-indent and then display either the value as it was applied, or the computed value. This second option allows you to see how the value of text-indent is serialized (stored). Most units are serialized in pixels.

Simulator.

The simulator allows you to test the effect of indents on the first lines of blocks (property text-indent), but also after forced line breaks: presence of a br tag in the second paragraph.

text-indent :

0

20px each-line

20px hanging

Indentation is the standard in writing texts in the French language, but this is not the case in other languages, such as Anglo-Saxon languages.

Indentation concerns the first line of each paragraph or block of text.⮐
This line, which follows a forced line break (br tag), has no indentation, except when using the each-line value.

Browsers compatibility with `text-indent`.

The text-indent property itself is very old: it is well supported by all browsers. But the new values added recently (hanging and each-line) are not yet supported. This explains why the first column is not entirely green.

Column 1

Support by browsers for the text-indent property which defines the indentation of the first line of paragraphs.

Column 2

Support by browsers for the value hanging for the property text-indent (this value indicates a hanging indent for the first lines of a paragraph).

Column 3

Support by browsers for the value each-line for the property text-indent.

Notes:

(1) Partial support. Does not recognize the words hanging and each-line.

text-indent
property

hanging
value

each-line
value

Estimated overall support.

17%

18%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Chrome

Safari

Firefox

Safari sur IOS

Edge

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the `text-indent` property.

Cascading Style Sheets specification - Version 1

This first level of the CSS specification describes the mechanism of cascading style sheets. Authors and readers can add styles to documents. Mainly intended for formatting HTML documents, CSS allows defining colors, fonts, text formatting, spacing (margins), etc. The CSS language is easy to understand, readable, and easy to write; it uses common terms from desktop publishing.

Regarding text-indent. Initial definition of the text-indent property in version 1 of the CSS language.

November 17, 1995
Working Draft.
November 12, 1996
Proposed for recommendation.
December 17, 1996
Recommendation .
September 13, 2018
Old specification, declared obsolete.
Cascading Style Sheets Level 2 - Revision 1 Specification

This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.

Regarding text-indent. The inherit value is accepted.

November 04, 1997
Working Draft.
March 24, 1998
Proposed for recommendation.
May 11, 1998
Recommendation .
CSS Text Module Level 3

This level 3 specification module defines the typographic controls of CSS, that is to say the rules for transforming source text into formatted text, with line breaks. Many properties control the alignment and justification of text, hyphenation rules, spacing of characters or words, grouping of consecutive spaces, etc.
These rules are often language-dependent, so it is advisable for authors to specify the language in which the text is written (the lang attribute for HTML). It may even be necessary to specify the writing system used, particularly for Korean, Japanese, Mongolian, etc. languages. Otherwise, the typographic formatting will be less precise.

Regarding text-indent. Adding hanging and each-line options.

January 27, 1999
Working Draft.
December 22, 2020
Candidate Recommendation.
CSS Text Module Level 4

This level 4 of this specification module describes the properties that affect typographic rules: text alignment and justification, word or character spacing, hyphenation rules, etc.
Compared to level 3, several new properties have been added, particularly concerning line breaks, hyphenation, spacing before and/or after the text, etc.

Regarding text-indent. No change regarding the text-indent property.

September 22, 2015
Working Draft.

Regarding text management, see also.

The property text-indent is described in the specification CSS Text Module, as well as everything related to text management (alignment, spacing, hyphenation, overflow, etc.). The following properties are also included in this specification module:

Properties:

⚠

hanging-punctuation

Sets suspended punctuation (characters allowed to overflow into the margin).

hyphenate-character

Defines the character that will be used as a hyphenation mark.

⚠

hyphenate-limit-chars

Sets the minimum number of characters to allow hyphenation of a word.

⚠

hyphenate-limit-last

Defines whether hyphenation is allowed at the end of a column, page, and so on.

⚠

hyphenate-limit-lines

Sets the maximum number of successive lines ending in a hyphenation

⚠

hyphenate-limit-zone

Sets the maximum number of spaces to allow or disallow hyphenation.

hyphens

Defines whether words can be hyphenated at the end of a line. The hyphenation of the words gives a more pleasant layout but can be annoying in some cases.

letter-spacing

Sets the letter Spacing.

line-break

Defines line breaks for the CJK languages (Chinese, Japanese, Korean).

⚠

line-padding

Adds a space at the beginning and end of lines.

overflow-wrap

Word breaking for CJK languages and a few others.

tab-size

Définit la taille des caractères de tabulation.

text-align