The text-align-last property is a CSS property that is used to align the last line of a block of text within its container. This property is particularly useful when dealing with text that is justified, as it allows you to control the alignment of the last line of text, which can often look awkward when left to default settings.
The text-align-last property is supported by most modern browsers, including Chrome, Firefox, Safari, and Edge. However, it is not supported by Internet Explorer.
The text-align-last property works by specifying how the last line of a block of text should be aligned within its container. There are several values that can be used with this property:
auto: This is the default value, and it allows the browser to determine the alignment of the last line of text based on the other properties that have been set.left: This value aligns the last line of text to the left edge of the container.right: This value aligns the last line of text to the right edge of the container.center: This value aligns the last line of text to the center of the container.justify: This value justifies the last line of text, stretching it to fill the entire width of the container.It is important to note that the text-align-last property only applies to the last line of a block of text. If the text is shorter than the container, or if there is only one line of text, this property will have no effect.
Here are some examples of how the text-align-last property can be used:
In this example, the text-align-last property is set to auto, which is the default value. This means that the browser will determine the alignment of the last line of text based on the other properties that have been set:
<p style="text-align: justify; text-align-last: auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</p>
In this example, the last line of text is justified, as specified by the text-align property. However, because the text-align-last property is set to auto, the browser has determined that the last line of text should be aligned to the left.
In this example, the text-align-last property is set to left, which aligns the last line of text to the left edge of the container:
<p style="text-align: justify; text-align-last: left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</p>
In this example, the last line of text is justified, as specified by the text-align property. However, because the text-align-last property is set to left, the last line of text is aligned to the left edge of the container.
In this example, the text-align-last property is set to right, which aligns the last line of text to the right edge of the container:
<p style="text-align: justify; text-align-last: right;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</p>
In this example, the last line of text is justified, as specified by the text-align property. However, because the text-align-last property is set to right, the last line of text is aligned to the right edge of the container.
In this example, the text-align-last property is set to center, which aligns the last line of text to the center of the container:
<p style="text-align: justify; text-align-last: center;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</p>
In this example, the last line of text is justified, as specified by the text-align property. However, because the text-align-last property is set to center, the last line of text is aligned to the center of the container.
In this example, the text-align-last property is set to justify, which justifies the last line of text, stretching it to fill the entire width of the container:
<p style="text-align: justify; text-align-last: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</p>
In this example, the last line of text is justified, as specified by both the text-align and text-align-last properties. The last line of text is stretched to fill the entire width of the container.
The text-align-last property is a useful CSS property that allows you to control the alignment of the last line of a block of text within its container. By using this property, you can ensure that your text looks neat and professional, even when it is justified.