[css] css to achieve text alignment effect:

---

1. Method 1:

Set text-align: justify; text-align-last: justify; and add text-justify: distribute-all-line; for compatibility with IE browsers

p{
    
    
   width: 130px;
   text-align: justify;
   text-align-last: justify;
   /*兼容ie*/
   text-justify: distribute-all-lines;
}

2. Method 2:

Set text-align, and set the style of the pseudo-element after or before. You can add width:100% or padding-left:100% 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%;
}

3. Note:

text-align-last: justify;只对中文文字起效果, and for numbers and English letters you need to use 空格间隔开, then use one of the two methods above , you can align both ends of the text