CSS text-align: justify; achieves two-end alignjustify

CSS text-align: justify; achieves two-end alignjustify

Reference: https://segmentfault.com/q/1010000007136263

Method 1: text-align-last: justify;

Html

<Div> <p class = "item"> <label for = "name" class = "itemLabel"> name </label> <input type = "text" class = "itemContent ""id =" name "> </p> <p class =" item "> <label for =" phone "class =" itemLabel "> mobile phone number </label> <input type = "text" class = "itemContent" id = "phone"> </p> </div>

Css

 .itemLabel{            display: inline-block;            width: 60px;            text-align-last:justify;    }

Due to text-align-last compatibility: https://caniuse.com/?search=text-align-last,#use the following methods:

Css

        .item{            position: relative;        }        .itemContent{            position: absolute;            left:70px;        }        .itemLabel{            display: inline-block;            width: 60px;            text-align: justify;        }       .itemLabel:after{            display: inline-block ;            content: '';             width: 100%;        }