短标题自动两端对齐

前几天在交流群里碰到了这样的一个问题“怎样让下图这组短名字保持长度一致，两端对齐呢？”

我在百度上查阅了一些文章，可是通过测试基本都没成功，最后找到一个可用的，并推理了一下原理，下面来跟你们分享一下。

解决这个问题的就是它：

text-align: justify;
text-align-last:justify;//IE

直接使用这个属性通过测试在Chrome,Firefox,IE 都是不生效的。
由于这个方法只对两行等以上的文字生效，单行不生效，若是想要这个方法生效的话，须要伪元素“::after”配合使用 (css代码以下)：

element::after {
    content:'';
    width:100%;
    display:inline-block;
}

下面说一下我我的推测的原理：

content：''

是为了让元素生效，内容为空，实际上他是存在的，可是不可见，能够被浏览器识别。

width:100%

是为了让伪元素宽度和父元素相同并单独占满一行。

display:inline-block;

特地写上这句话是由于text-align: justify;只对inline或inline-block元素生效，可是在实际开发中，咱们是没法避免元素多是block块级元素的，因此才加上了这一属性。

总结下来也就是说，伪元素::after 本身独占了一行使浏览器认为该元素不是一行文字，而是两行，因此text-align: justify;就生效了。

其余一些问题：
一、在写demo时发现，若是浏览器是Chrome的话，单独写text-align: justify;并不生效，
可是单独写text-align-last:justify;就生效了，而且不写伪元素也能够，具体什么缘由不知道，可是不建议使用，由于查阅资料发现 text-align-last:justify; 是针对IE浏览器的（虽然测试的时候他也没生效吧）。

二、若是按照上面的伪元素方法在chrome中使用的话是能够生效的，可是在Firefox中又不生效了，是由于在firefox中须要这样写

<p>你 好 世 界</p>

也就是每一个字中间须要打上空格若是直接写 “你好世界” 也是不生效的（当时搞得人是一头雾水啊），因此仍是建议在chrome中也可使用中间打上空格的这样 Chrome,Firefox,IE 均可以同时生效。

这个问题也是我找到生效的样式看代码推理来的，若是哪位大神有发现个人原理是错误的，但愿能够指正并一块儿交流。