CSS text indent first line
Text formatting
The standard view of the text does not always fit, either in appearance or color, CSS provides extensive possibilities with which you can drastically change your text, for example by setting the color, changing the line spacing, the spacing between letters or the size of the text, and much other.
Text indent first line
Indentation in the first line of a paragraph is one of the most common effects for text. In CSS, the text-indent property is used to specify the indentation.
If the text-indent property is applied, the first line of any element can be offset by a specified value, even if the value is negative. Most often, this property is used to offset the first line of paragraphs on pages where there is a lot of textual information.
p { text-indent: 30px; }
According to the code of our example, the first line of any paragraph will shifted on 30px.
The text-indent property works only with block elements, it cannot be applied to inline elements or to inserted content, such as images. But if the first line of a block element, such as a paragraph, has a image, it will be shifted along with the rest of the line text.
Negative property values allow you to make text with the first line serving. But by setting negative values, you should be aware that part of the serving string can go beyond the bounds of the element or even be clipped to the left edge of the browser window if the element is close to the edge. To avoid such troubles, you can apply the inner indentation on the left side of the element equal to the ledge:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page title</title>
<style>
p {
text-indent: -40px;
padding-left: 40px;
}
</style>
</head>
<body>
<p>In this paragraph, the first line will protrude on the rest of the 40px,
to see the output of the line outside the element and truncate it all by doing so,
simply delete the CSS line adding the inner indentation to
the paragraph (padding-left: 40px;).</p>
</body>
</html>
Try it »
With the text-indent property, any units of length measurement, including percentage values, can be used. The size of the indentation, set in percentage, is related to the width of the parent element. For example, if an indent is set to 50% and the paragraph occupies the entire width of the browser window, the first line will begin in the middle of the screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page title</title>
<style>
.test1 { text-indent: 25px; }
.test2 { text-indent: 50%; }
</style>
</head>
<body>
<p class="test1">A paragraph with an indent of the first line of 25px.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="test2">A paragraph with an indent of the first line of 50%.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Try it »
Note: it is worth paying attention that the text-indent property is inherited, which can lead to unexpected results:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page title</title>
<style>
.test1 { text-indent: 15%; }
</style>
</head>
<body>
<div class="test1">
The first line of the div element's text will have an indent equal to 15%
of the width of its parent element or the width of the browser window.
<p>The first line of the p element's text will have an indentation that
has been inherited from its parent element.</p>
</div>
</body>
</html>
Try it »
Text formatting
There are various properties for formatting the text, consider some of them. The text-decoration property allows you to make the text underlined, set a line above the text, or make the text crossed out. Use the text-transform property to control lowercase and uppercase letters. If you want to increase or decrease the spacing between characters in the text, the letter-spacing property will help you:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page title</title>
<style>
p.class1 {
text-transform: uppercase;
text-decoration: overline;
}
p.class2 {
text-transform: lowercase;
text-decoration: line-through;
}
p.class3 {
text-transform: capitalize;
text-decoration: underline;
}
</style>
</head>
<body>
<p class="class1">First paragraph.</p>
<p class="class2">Second paragraph.</p>
<p class="class3">The third paragraph.</p>
<p style="letter-spacing:3px;">The spacing between characters in the text
has been changed using the letter-spacing property.</p>
</body>
</html>
Try it »
With this theme look: