平常使用中很少会用到两端对齐的样式。但是确实有些地方两端对齐会好看很多，所有UI很喜欢画个两端对齐的图片来给你做。
单纯的实现两端对齐很简单，就是给元素设置好基础属性和宽度之后，再给其设置css样式text-align: justify; 即可。但是这样有个问题，就是最后一行没有效果，如果元素只有一行，那就整体都没有效果，解决办法：
text-align-last: justify; 或者，给元素增加after伪元素；
这样在谷歌浏览器中就没有问题了，但是问题又来了，在ie和火狐中，又没有效果了，不得不说text-align: justify; 的兼容性太差了。
解决办法：
火狐：给文字每个中间加上空格。此方法只对于剪短的固定的标题类的文字比较适用，对于长文本和变量就不太使用了，但是这是唯一行之有效的办法。
IE：理论上和火狐一样加上空格可以成功，如果不成功，可以试下加上text-justify:inter-ideograph;
效果对比如下：
PS，为了美观，需要把冒号与文字分开。且需要注意的是添加和去掉空格直接在页面上调试修改是不行的，比如修改源代码才有效。