背景
公司需要做一个修改信息的页面，而登记这些信息的页面已经在使用了，而且还是别人开发的。那么我需要做的就是模仿他页面开发。其中遇到了label的两端对齐需求，如何兼容各种浏览器。
第一种：text-align-last: justify
这个是最简单的一个css3样式，但是兼容性不好。
text-align-last: justify;width: 100%;
只需要增加一个宽度属性便可以了。（ps:记得给行内标签加display: inline-block;）
第二种：text-align: justify;
这是一种需要一个伪元素才能实现的方案。需要在label文本的后面添加<span></span>或者任意的非块级标签，当然你也可以使用after实现。
原理：justify生效的时候，需要不处于最后一行。那么我们可以增加一行，让label文本不是最后一行就可以生效了。
label{
display: inline-block;
width: 100%;
text-align: justify;
height: 0.8rem;
}
label>span{
display: inline-block;
padding-left: 100%;
}
总结
选择第二种方式比较好一点，没有兼容性问题，比较简单。
基本上内容就到次完结了。
-----------------------------------分割线--------------------------------------------------
新问题：如果一个label文本太长，以上办法无法解决怎么办呢？
新的解决方案依然是第二种，只不过需要对label文本稍加判断，添加不同的类名去实现。
一般来说，一个label文本的最合适的长度是4个中文。那么我们就根据这个判断，去加载不同的类名。
兼容文本太长的解决方案
实现步骤（ps：这个默认label的长度不会超过8个）
- 先判断文本长度是否大于4
- 加载不同的类名
步骤超级简单，其实这个主要的难点还是在css上。
以下就是不同类名的css
.label{
display: inline-block;
width: 100%;
text-align: justify;
height: 0.8rem;
}
.label1{
line-height: 0.8rem;
}
.label2{
line-height: 0.4rem;
}
.label>span{
display: inline-block;
padding-left: 100%;
}
两个不同的类名，差别就在于line-height上，其余都是一样。
假如你看懂了，那么如果label文本长度超过了8个中文字，小伙伴应该能很快知道需要新增的样式是什么样了吧。
题外话
有一些字段是必填的，有一些字段是非必填的。那么我们怎么在label上加呢？
第一种：直接在label的文字后面前面加*，或者使用after
这种方式虽然简单，但是会占位子（这里的占位是指与文本的位置，简单说就是算作了一个中文字符），不好用。各位可以试试。
第二种：使用before伪元素，或者直接加在label前面
这种方式跟第一种其实是一样的，会受label标签本身的样式影响
第三种：把label的文本再包一层，然后label使用before伪元素定位。 这种实现方式是最好看的。这里还需要考虑label文本的长度是否超过4的情况。
最后一种代码实现
