To achieve the effect of text alignment at both ends, you can use the text-align property of CSS. Set text-align: justify; to achieve text alignment effect.
Method 1 : Set text-align: justify; text-align-last: justify; and add text-justify: distribute-all-line; to the element to be compatible with ie browser
p{
width: 130px;
text-align: justify;
text-align-last: justify;
/* cumshot ie */
text-justify: distribute-all-lines;
}
Method 2 : Set text-align, and set the after or before style of the pseudo-element. Width:100% or padding-left:100% can be added to the pseudo-element to achieve the effect we want.
p {
width: 200px;
height: 30px;
text-align: justify;
}
p::after {
content: "";
display: inline-block;
/* padding-left: 100%; */
width: 100%;
}
Note: text-align-last: justify; only works on Chinese characters, while numbers and English letters need to be separated by spaces, and then use one of the above two methods to achieve text alignment!
