Specifies the amount of space horizontally that should be left on the first line of the text of an element. This horizontal spacing is at the beginning of the first line and is in respect to the left edge of the containing block box.
Overview table0
textIndent
text-indent: <length/percentage> each-linetext-indent: <length/percentage> each-linetext-indent: <length/percentage> hangingtext-indent: inherittext-indent: lengthtext-indent: percentagetext-indent: 7px each-line;). It will affect not only the first line of the block container but also any line that is after a forced line break. This does not have affect on soft wrap break.
Currently experimental in CSS Text Level 3
text-indent: 7px hanging;). It inverts which lines are indented so that everything but the first formatted line is indented.
Currently an experimental feature.
text-indent: 7px each-line;). It indents all lines in the element, not just the first line.
Currently an experimental feature.
ExamplesThe following examples use the text-indent attribute and the text-indent property to indent the object’s text.
This example uses calls to an embedded style sheet to change the indent on the text when a click event occurs. The text was originally indented 2 centimeters using div as a selector in the style sheet.
p:nth-child(1) {
text-indent: 3em;
}
p:nth-child(2) {
text-indent: 3em hanging;
}
p:nth-child(3) {
text-indent: 50%;
}
This example uses JavaScript to indent the text within the div when a mouseover event occurs.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script>
function initialize() {
var element = document.getElementById("example");
element.addEventListener("mouseover", function () {
this.style.textIndent = "2cm";
}, false);
}
window.addEventListener("load", initialize, false);
</script>
</head>
<body>
<div id="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum malesuada quam, ut ullamcorper nunc posuere in. Duis ullamcorper fringilla lorem eget accumsan. Praesent neque ipsum, tincidunt eget aliquet sit amet, tempor eget felis. Duis nibh magna, vestibulum et molestie sed, porttitor vel tellus. Nunc suscipit justo ut magna imperdiet pharetra. Suspendisse potenti. Vivamus vestibulum, dui eu fermentum blandit, nunc dolor aliquet massa, non elementum arcu arcu ut risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse tincidunt nibh at ipsum semper eu tempor nisi ornare. Nunc vestibulum elementum dapibus. Morbi pellentesque nulla non est adipiscing id commodo eros blandit. Suspendisse mauris tellus, auctor a sodales a, consequat nec diam.</div>
</body>
</html>
It is important to note that the keyword options (each-line and hanging) are experimental features; exercise caution when using them, as there is no guarantee of cross-browser compatibility.
The property can be negative. An indent is not inserted in the middle of an object that was broken by another object, such as br in HTML.
Related specificationsMozilla Developer Network : Article
Microsoft Developer Network: [Windows Internet Explorer API reference Article]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4