What is the method of css to realize text alignment at both ends?

This article introduces css to achieve text alignment at both ends of the method is, the content is very detailed, interested friends can refer to, hope to be helpful to you.

The method of text alignment based on css

Speaking of text-align, we must not feel strange, we often use the keywords left, right, center to achieve in-line elements relative to the parent element left, right, center alignment, of course, we also use justify to achieve text alignment at both ends.

The alignment at both ends is visually neat and orderly relative to the left alignment. But justify is not valid for the last line, usually such typesetting is excellent for the whole paragraph, we do not want to align both ends of the last line when there are only two words, after all, it is not easy to read, so when we have only one line of text, but how to achieve single-line text alignment at both ends (such as the table item effect in the following figure)?

Since justify is not valid for the last line, we can add a new line so that the text is not the last line, as follows:

/ / html {{item.label}}: {{item.value}} / / scss .item {height:32px; line-height:32px; margin-bottom:8px; .label {display:inline-block; height:100%; width:100px; text-align:justify; vertical-align:top; &:: after {display:inline-block; width:100% What is the full name of content:''; height:0;} .value {padding-right:10px;}} css the full name of css is Cascading Style Sheets (cascading style sheets), a computer language used to represent file styles such as HTML or XML. CSS can not only modify the web page statically, but also format the elements of the web page dynamically with various scripting languages.

On css to achieve text alignment method is what is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.