Introducing the CSS text-align-last Property

CSS text-align-last Detailed description of properties: Perfectly aligned the last line of text

Subtleties often determine the success or failure of user experience. Details such as text shadows and element spacing can affect the overall view of the website. The text-align-last attribute is created for this, it can accurately control the alignment of the last line of the text block or the previous line of the forced new line, especially when dealing with text alignment at both ends.

This article will explore in-depth aspects of the text-align-last attributes, including available values, browser support, and specific browser behavior.

Usage and available values

Use text-align-lastThe attributes are very simple. The following code snippet right-aligns the last line of text:

.intro-graph {
  text-align: justify; /* IE 和 Edge 浏览器需要 */
  text-align-last: right;
}

The property has seven values: left, right, center, justify, start, end, auto,

, and

. The first three values ​​align the last line of text left, right, and center respectively. justify The

value aligns the last line of text at both ends, and fills the container space by adjusting the word spacing. Depending on the text length, this property can effectively avoid large blanks on the last line. start leftright Value aligns text to the beginning of the line according to the text orientation (left to right or right to left). For left-to-right languages, it is equivalent to end; for right-to-left languages, it is equivalent to

. The value is the opposite and is aligned to the end of the line according to the text direction.

The autotext-align value is the default value, which aligns the last row according to the value of the text-align attribute. If justify is auto, then start is equivalent to

.

Precautions

text-align-lastSpecification stipulates that text-align attribute needs to be set to justify for the text-align: justify attribute to take effect. However, only IE and Edge browsers follow this rule. This property works properly even if the Firefox and Chrome browsers are not set.

The

text-align-last attribute affects the last line of all paragraphs within the specified element, rather than the absolute last line of the content only. If you want to align only the absolute last row, use the :last-child or :last-of-type selector.

If the paragraph has only one line, the text-align-last attribute takes precedence over the text-align attribute unless the text-align attribute specifies an explicit first line alignment (for example, start end).

Browser support

text-align-last Properties are supported in Chrome and Opera browsers (version 35 and above) by enabling Enable Experimental Web Platform Features. Starting with versions 47 and 34, Chrome and Opera browsers fully support this property.

Firefox browser requires the -moz- prefix. IE browser does not support the start and end values, but the Edge browser fully supports this property. The Safari browser does not support this property at all.

Summary

text-align-last Property Although not all browsers fully support it, its wide range of application scenarios make it an important tool for improving website text typesetting. Using this attribute rationally can significantly improve the overall aesthetics and user experience of the website.

FAQs about CSS text-align-last Properties

(The FAQ part in the original text is omitted here because the article is too long and does not match the pseudo-original goal. The content of the FAQ part can be supplemented or modified as needed.)

The above is the detailed content of Introducing the CSS text-align-last Property. For more information, please follow other related articles on the PHP Chinese website!