文字两端对齐

在制作表单时，常常会遇到label标签需要两端对齐。
两端对齐首先想到的是text-align: justify属性。

text-align

当使用text-align: justify这个样式属性时，往往会不尽人意。因为这个属性只针对文本非尾行文字进行两端对齐。表格label往往只有一行，即使首行也是尾行，所以单单使用text-align: justify是达不到两端对齐的效果的。所以这里还要加一些其他属性。
利用伪元素制作制作尾行。

label {display: block}
label span {
  display: inline-block;
  width: 90px;
  text-align: justify; 
  line-height: 0;
}
label span:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
}

text-align-last

同时对需要两端对齐的容器使用text-align: justify; text-aligin-last:justify 也可以达到尾行两端对齐的效果。

label span {
  display: inline-block;
  width: 90px;
  text-align: justify; 
  text-aligin-last:justify;
}

• text-align-last 浏览器兼容性

  
  image.png