text-align: justify
It will not take effect when there is only one line in the copy.
The solution is used text-align-last: justify
to fix text-align: justify
the problem on the last line does not work.
Android still has a certain degree of support, but ios is miserable and does not support it at all, so it can only be changed. The reason why the
analysis is text-align: justify
not effective is that the text is on the last line, so you can add a label before and after the justified text, and then squeeze the text on the position that is not the last line.
.content { width: 100px;/*There must be a fixed width, otherwise it will not be able to justify*/ text-align: justify;/*Set the justify property*/ } .content:before, .content:after { display: inline-block;/*Inline elements*/ content:''; width: 100%;/*You can squeeze out the text to ensure that it is not on the same line as the text*/ height: 0; visibility: hidden; }