text-align:justify实现文本两端对齐且兼容IE

对于text-align 我们再熟悉不过了，可是它有个justify属性，平时很少用到，就鲜为人知了。justify是一种文本靠两边布局方式，一般应用于书刊杂志排版；合理运用text-align:justify 有时会省去很多开发的时间。

举个栗子！
比如有个定宽的流程进度条，进度条上时间点的数量不限，但要求不管有多少个时间点，都要平分两端对齐整个流程进度条。

形象又生动的栗子： 
1         2        3        4       5 
1                  2                  3 
1          2           3             4

删除线相当于固定宽度的进度条，数字相当于时间节点。

如果你还不明白什么意思，那么看下面是实际运用：

Demo

Firefox和Chrome下：

在进度条的宽度固定的情况下，我们只要增加/删除 对应的时间节点 就轻松实现了文本自适应两端对齐的布局。

对于这种结构，最省时省力的方法莫过于 text-align:justify 这个样式：不需要计算margin间距，让文本行的左右两端都放在父元素的内边界上。想想用简单的方法能解决复杂的问题就会偷着乐...这种方法在FF、Chrome、IE8及以上都没问题，但是...你懂的!

《CSS权威指南》明确说明，text-align应用于块级元素；对于text-align:justify，IE6/7只认display:inline-block的行内元素。这样就容易造成语义化的问题，因为不能使用li和div块级元素，当我们需要在行内元素添加的其他内容时，便会出现例如span套span的结构。

如何取舍，就看实际情况了。

还要注意的是：要两端对齐的前提就是内容必须超过一行，所以，要解决最后一行元素无法两端对齐的文字其实很简单，就是在列表（或文字段）的最后创建一个高度为0的宽度100%的透明的inline-block的标签层就可以了。

 

除了上面语义化的问题，为了兼容IE6/7，使用text-align:justify时需要结合另外一个IE私有属性：text-justify:inter-ideograph  ；

text-justify语法：
text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph
text-justify参数
auto：允许浏览器用户代理确定使用的两端对齐法则 ；
inter-word：通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 ；
newspaper ：通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式 ；
distribute：处理空格很像newspaper，适用于东亚文档。尤其是泰国 ；
distribute-all-lines：两端对齐行的方式与distribute相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档 ；
inter-ideograph：为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格。

因此我们要把text-align:justify;text-justify:inter-ideograph;放在一起来兼容IE浏览器：

乍一看IE6/7和FF、Chrome差异很大，但这个差异并不是text-align:justify引起的，事实上IE6/7已经实现了text-align:justify的功能，只是我们无意中触发了IE的经典bug,这里就不再赘述。

其实这个问题很好解决：进度条用图片代替背景色就OK了。

这样，就解决了text-align:justify兼容各个浏览器的问题。