[toc] ## 左中右对齐 ## IE兼容 ie并不支持让**中文**text-align:justify 原因在于谷歌和火狐对text-align:justify进行了算法区分，对CJK文本采用`letter-spacing`算法，而非CJK采用`word-spacing`算法。 而IE并不支持`letter-spacing`算法 So需要使用替代方案 ``` text-justify:inter-ideograph; ``` ## justify，为什么会失效? text-align:justify要想有两端对齐的效果(无论是对文本还是inline-block)。需要满足两点: 1. 有分隔点，如空格 (如果是中文文本两端对齐并不需要，英文需要，inline-block也需要) 2. 超过一行，并且不是最后一行 ``` .justify{ text-align:justify; text-justify:inter-ideograph; } .justify:after{ content:''; display:inline-table; /* inline-block */ width:100%; } ``` >其它答案 > 这个是因为text-align不会处理被打断的行(强制打断的行？)和最后一行。因为你这里的文字只占了一行，所以也是最后一行了，所以text-align设置为justify不会产生任何效果。 解决方法是使用text-align-last，并将其设置为justify。 不过不幸的是，text-align-last不是所有浏览器支持。 所以对于不支持text-align-last的，可以在最后一行人工生成两行文本，然后把第二行隐藏了，那么我们要现实的第一行自然就可以实现两端对齐了。 而你的span是inline-block，也可以设置宽度（100%），那么这个时候内联匿名盒的宽度超过行盒，浏览器会将其拆成两行，自然第一行文本的text-align效果就生效了。你的实现刚刚好是上面的第二个实现方法。 ``` span:after { content:''; width: 100%; display: inline-block; overflow: hidden; height: 0; } ``` 如果不考虑兼容Safari，可以直接使用 ``` text-align-last:justify ``` 除此之外，IE需要兼容 ``` .justify{ text-align:justify; text-justify:inter-ideograph; } ``` ### justify的应用  >[danger] 如果line-height设置的是固定值，如line-height:20px，则容器需要同步设置line-height:0或则改为相对计算的值。