CSS文字两端对齐

在处理一些表单内容时，我们经常遇到时长短不一的标题两端对齐的需求。

可以看出，其实text-align:justify对于最后一行是没有效果的。这个时候有两种解决方法。

1.在末尾添加元素

.item { height: 32px; line-height: 32px;  margin-bottom: 8px;}

.label {  display: inline-block; height: 100%; width: 100px; text-align: justify; vertical-align: top;}

.label::after { display: inline-block; width: 100%; content: ''; height: 0; } 

.value { padding-right: 10px; } 

2.属性text-align-last

兼容性一些浏览器不行

.item { margin-bottom: 8px;}

 .label { display: inline-block; height: 100%; min-width: 100px; text-align: justify; text-align-last: justify; }

.value { padding-right: 10px; }