css让文字两端对齐

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

效果图.jpg

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

<div>
    姓名<i></i>
</div>
<div>
    受访人<i></i>
</div>
<div>
    联系电话<i></i>
</div>

然后设置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;
}

这样就可以了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。