[] Tips] CSS text is aligned at both ends, and css text is aligned at both ends

[] Tips] CSS text is aligned at both ends, and css text is aligned at both ends

The requirements are as follows. The text in the red box contains four words, three words, and two words. If the two sides are not aligned, you can select center or right. But what if the two ends are aligned like below?

I believe many people have done this before: two words can be separated to reach the width of four words, and three words can also be separated. However, for example, in the "122 account" and "122 password" section, it is difficult to calculate how many spaces should be used.

Suppose we have the following HTML:

<Div> In this world, only a dream and a girl can live up to it! </Div>

Add a style to it

div{  width:500px;  border:1px solid red;  text-align: justify;}

The initial effect is as follows:

text-align: justifyWhat is this? CSS2text-alignThere is a property valuejustify, Indicates alignment. The result is that the two sides of a line of text can be displayed in alignment (more than one line of text content ).

But it is still useless .....

To align the two ends of the text, we have to use an empty label in the row to help, such<span>,<i>Wait. I used it here.<i>Tag

<Div> In this world, only a dream and a girl can live up to it! <I> </div>

Give thisiLabel settings:

div i{  display:inline-block;  /*padding-left: 100%;*/  width:100%;}

padding-left: 100%Andwidth:100%Can achieve the effect, choose one. The effect is as follows: