There are several values ​​of css text alignment property

The text-align (text alignment) attribute specifies the horizontal alignment of text within an element.

value justify

The last horizontal alignment property is justify, which brings its own set of problems.

A value of justify will justify both ends of the text. In justified text, the left and right ends of the line of text are placed on the inner border of the parent element. Then, adjust the spacing between words and letters so that the lines are exactly equal in length. You may have noticed that justified text is very common in the printing world. In CSS, though, there is a little more thought to be done.

It is up to the user agent (not CSS) to determine how justified text stretches to fill the space between the left and right borders of the parent element. For example, some browsers may only add extra space between words, while others may evenly distribute the extra space between letters (though the CSS specification specifically states that if the letter-spacing property is specified as a length value, “User Proxies cannot further increase or decrease the space between characters”). Also some user agents may reduce the space on some lines, squeezing the text closer together. All of these practices affect the element’s appearance and even change its height, depending on how many lines of text are affected by the user agent’s alignment choices.

CSS also does not specify how hyphens should be handled (Note 1). Most justified text uses hyphens to separate long words on two lines, reducing the space between words and improving the appearance of lines of text. However, since CSS does not define hyphenation behavior, it is unlikely that user agents will hyphenate them automatically. As a result, justified text doesn’t look as nice to print in CSS, especially since elements may be so narrow that only a few words can fit on a line. Of course, it is possible to use narrow design elements, but beware of the corresponding disadvantages.

Note 1: CSS does not specify how to handle hyphens, because different languages ​​have different hyphenation rules. Instead of attempting to reconcile such potentially incomplete rules, the specification simply leaves the issue alone.

The above are the details of the values ​​of the css text alignment attribute. For more details, please pay attention to other related articles on 1024programmer.com!