css让文字两端对齐

相信有的有轻微强迫症的产品需求人员会提出让文字两端对齐的需求,比如说从上面的样子变成下面的样子

效果图.jpg

这时我们需要css中的text-align: justify;但是它不处理块内的最后一行,所以块内不能只有一个元素,所以我们可以在块内加入元素

姓名
受访人
联系电话

然后设置css

div{
    width:100px;
    text-align: justify;
}
div i{
    display:inline-block;
    /*padding-left: 100%;*/
    width:100%;/*padding-left和width二选一即可*/
}

但是在谷歌,IE和火狐运行之后发现,IE上不生效,容器标签需要改成这样

div{
    width:100px;
    text-align: justify;
    text-justify:inter-ideograph;
}

这样就可以了

你可能感兴趣的:(css让文字两端对齐)