Style textIndentProperty
Style Object
Definition and Usage
The textIndent property sets or returns the indentation of the first line of text.
Syntax
Set the textIndent property:
Object.style.textIndent="length|%|inherit"
Return the textIndent property:
Object.style.textIndent
| Value | Description |
|---|---|
| length | Defines the indentation using units such as px, cm. The default value is 0. |
| % | Defines the indentation as a percentage of the parent element's width. |
| inherit | The value of the textIndent property is inherited from the parent element. |
Browser Support
All major browsers support the textIndent property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".
Example
Example
Indent text:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<script>
function displayResult(){
document.getElementById("div1").style.textIndent="50px";
}
</script>
</head>
<body>
<div id="div1">
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
</div>
<br>
<button type="button" onclick="displayResult()">Indent text</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<script>
function displayResult(){
document.getElementById("div1").style.textIndent="50px";
}
</script>
</head>
<body>
<div id="div1">
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
This is some text. This is some text.
</div>
<br>
<button type="button" onclick="displayResult()">Indent text</button>
</body>
</html>
Try it yourself »
Style Object Other Extensions