9.1 text-indent Property
Paragraph properties in CSS play a key role in managing text formatting, ensuring readability and aesthetic appeal. Among them, text-indent and text-align-last are essential tools for setting up indents and aligning the last line of text in a paragraph.
The text-indent property manages the indentation of the first line of text within a block element. It's often used to create indents at the beginning of paragraphs, enhancing the readability and structure of the text.
Values:
- Absolute values: values in fixed units like pixels (
px), points (pt), centimeters (cm), etc. For example,text-indent: 20px; - Percentage values: values as a percentage of the containing block's width. For instance,
text-indent: 5%; - Negative values: indents can be negative, leading to text alignment to the left beyond container boundaries. For example,
text-indent: -20px;
Example Usage:
.indent-20px {
text-indent: 20px;
}
.indent-5percent {
text-indent: 5%;
}
.indent-negative {
text-indent: -20px;
}
<body>
<p class="indent-20px">This is a paragraph with the first line indented by 20 pixels.</p>
<p class="indent-5percent">This is a paragraph with the first line indented by 5 percent of the block's width.</p>
<p class="indent-negative">This is a paragraph with a negative first line indent of 20 pixels.</p>
</body>
9.2 text-align-last Property
The text-align-last property controls the alignment of the last line of text within a block element. It's useful for achieving consistent alignment in paragraphs, especially when text is justified (justify).
Values:
auto: the last line is aligned like normal text (default value)left: aligns the last line to the leftright: aligns the last line to the rightcenter: centers the last linejustify: justifies the last line, like the rest of the paragraph's lines
Example Usage:
.justify-left {
text-align: justify;
text-align-last: left;
}
.justify-right {
text-align: justify;
text-align-last: right;
}
.justify-center {
text-align: justify;
text-align-last: center;
}
.justify-justify {
text-align: justify;
text-align-last: justify;
}
<body>
<p class="justify-left">This is a paragraph with text justified and the last line aligned to the left.</p>
<p class="justify-right">This is a paragraph with text justified and the last line aligned to the right.</p>
<p class="justify-center">This is a paragraph with text justified and the last line centered.</p>
<p class="justify-justify">This is a paragraph with text and last line justified.</p>
</body>
9.3 Using Properties Together
The text-indent and text-align-last properties can be used together to create more complex paragraph formatting, enhancing readability and the visual structure of the text.
Example HTML and CSS:
.styled-paragraph {
text-indent: 30px;
text-align: justify;
text-align-last: right;
width: 300px;
border: 1px solid #000;
padding: 10px;
}
<body>
<p class="styled-paragraph">
This paragraph has a 30-pixel first line indent, text justified, and the last line aligned to the right.
This demonstrates using both text-indent and text-align-last properties together to achieve the desired formatting effect.
</p>
</body>
Code Explanation:
text-indent: 30px;: sets the first line text indent to 30 pixelstext-align: justify;: justifies the text across the container's widthtext-align-last: right;: aligns the last line of text to the rightwidth: 300px;: sets the container's width for the textborder: 1px solid #000;: adds a border around the text containerpadding: 10px;: sets the padding inside the container
GO TO FULL VERSION