前几天在交流群“如何让下图中的短名称保持一样长，两端对齐？”遇到这样的问题。在百度上查了一些文章，但是经过测试，基本没有成功。终于找到一个能用的，推理一下原理。让我与你分享。这个问题的解决方法是：text-align:justify;text-align-last:justify;//IE直接使用该属性已经过测试，在Chrome、Firefox、IE中不起作用。因为这个方法只对两行或两行以上的文本生效，而不是单行。如果想让这个方法生效，需要使用伪元素“::after”（css代码如下）：element::after{content:'';宽度：100%；display:inline-block;}说一下我个人推测的原理：content:''是让元素生效，content为空。其实是存在的，只是看不见摸不着，可以浏览设备标识。width:100%是让伪元素的宽度和父元素一样，占一行。显示：内联块；这句话是专门写的，因为text-align:justify;只对inline或者inline-block元素有效，但是在实际开发中，我们无法避免可能是块级元素的元素，所以增加了这个属性。综上所述，也就是说，伪元素::after占据了独占一行，让浏览器认为该元素不是一行文本，而是两行，所以text-align:justify;将生效。其他一些问题：1.写demo的时候发现如果浏览器是Chrome，写text-align:justify;单独不生效，而是写text-align-last:justify;单独生效，不写伪元素也可以。具体原因不知道，但是不推荐使用，因为发现text-align-last:justify;是针对IE浏览器的（虽然测试的时候没有生效）。2、如果按照上面伪元素的方法在chrome中使用，会有效，但是在Firefox中就无效了，因为在Firefox中需要写
HelloWorld
，那就是，每个单词中间都需要加一个空格。如果直接写“HelloWorld”是行不通的（当时很迷惑），所以推荐使用Chrome、Firefox、IE中间的空格。同时生效。这个问题也是我找有效风格，看代码推理的结果。如果哪位高手发现我的原理有误，还望指正并与大家交流。