CSS Style textAlignLast Property: CSS Text Align Last

CSS textAlignLast Property: Controlling the Last Line’s Alignment

The textAlignLast property in CSS specifies how the last line of a block or a line right before a forced line break is aligned. This property is particularly useful for controlling the layout of text in justified blocks, ensuring the last line doesn’t stretch awkwardly. This guide provides a comprehensive overview of the textAlignLast property, including its syntax, values, and practical examples.

What is textAlignLast?

The textAlignLast property is a CSS property that determines the alignment of the last line of text in a block-level element, or the line immediately preceding a forced line break. It is effective only when textAlign is set to justify.

Purpose of textAlignLast

The main purpose of the textAlignLast property is to enhance the aesthetic appearance of justified text blocks. It prevents the last line from stretching across the entire block, which can often look odd or unbalanced. By using textAlignLast, you can specify a more appropriate alignment for the final line.

Syntax of textAlignLast

The textAlignLast property takes one of the following values:

textAlignLast: auto|left|right|center|justify|start|end|initial|inherit;

Possible Values

Basic Examples

Let’s explore some basic examples of how to use the textAlignLast property.

Example 1: Using textAlignLast: left

This example aligns the last line of a justified text block to the left.

<div id="textBlockLeft" style="width: 300px; text-align: justify; text-align-last: left; border: 1px solid #ddd; padding: 10px;">
  This is a block of text that is justified. The textAlignLast property is set to left, so the last line will be aligned to the left.
  This ensures a cleaner look for the final line of the paragraph.
</div>

Example 2: Using textAlignLast: right

This example aligns the last line of a justified text block to the right.

<div id="textBlockRight" style="width: 300px; text-align: justify; text-align-last: right; border: 1px solid #ddd; padding: 10px;">
  This is a block of text that is justified. The textAlignLast property is set to right, so the last line will be aligned to the right.
  This can be useful for adding a unique visual element to your text blocks.
</div>

Example 3: Using textAlignLast: center

This example centers the last line of a justified text block.

<div id="textBlockCenter" style="width: 300px; text-align: justify; text-align-last: center; border: 1px solid #ddd; padding: 10px;">
  This is a block of text that is justified. The textAlignLast property is set to center, so the last line will be centered.
  This can provide a balanced look for shorter paragraphs or specific design requirements.
</div>

Example 4: Using textAlignLast: justify

This example justifies the last line of a justified text block.

<div id="textBlockJustify" style="width: 300px; text-align: justify; text-align-last: justify; border: 1px solid #ddd; padding: 10px;">
  This is a block of text that is justified. The textAlignLast property is set to justify, so the last line will also be justified.
  However, if the last line is too short, it might stretch awkwardly.
</div>

Advanced Use Cases

Combining with Media Queries for Responsive Design

You can use textAlignLast in combination with media queries to adjust the alignment based on screen size, ensuring optimal readability across different devices.

<style>
  #responsiveText {
    width: 80%;
    text-align: justify;
    border: 1px solid #ddd;
    padding: 10px;
    margin: 0 auto;
  }

  @media (max-width: 600px) {
    #responsiveText {
      text-align-last: left;
    }
  }

  @media (min-width: 601px) {
    #responsiveText {
      text-align-last: center;
    }
  }
</style>

<div id="responsiveText">
  This is a block of text that is justified and responsive. On smaller screens, the last line will be aligned to the left, while on larger screens, it will be centered.
  This ensures a better reading experience on various devices.
</div>

Using textAlignLast with Different Languages

The start and end values are particularly useful for internationalization, as they adapt to the text direction of the language.

<div id="languageText" style="width: 300px; text-align: justify; text-align-last: end; border: 1px solid #ddd; padding: 10px; direction: rtl;">
  هذا النص مُبرّر. خاصية textAlignLast مضبوطة على النهاية، لذلك سيتم محاذاة السطر الأخير إلى اليمين في سياق الكتابة من اليمين إلى اليسار.
</div>

In this example, the text is right-to-left, so textAlignLast: end aligns the last line to the right.

Tips and Best Practices

• Use with textAlign: justify: The textAlignLast property is most effective when used with textAlign: justify.
• Consider Readability: Choose an alignment that enhances readability and visual appeal.
• Test Across Browsers: Ensure consistent rendering across different browsers.
• Responsive Design: Use media queries to adjust the alignment based on screen size.

Browser Support

The textAlignLast property has good support in modern browsers:

• Chrome
• Firefox
• Safari
• Edge
• Opera

Note: Always test your designs across different browsers to ensure consistency. 🧐

Conclusion

The textAlignLast property is a valuable tool for controlling the alignment of the last line of text in justified blocks. By using it effectively, you can enhance the visual appeal and readability of your text, creating a more polished and professional design. Experiment with different values to find the best fit for your specific design needs. Happy styling!