text-align:justify两端对齐

属性

说到对齐问题首先一下关于两端对齐的几个属性：

text-align: left | right | center | justify | inherit | start | end | match-parent

text-align此属性作用在是inline和inline-block的子元素上，对block水平的元素没有作用；

其中start | end | match-parent是css3新属性，start类似于left，end类似于right，他们实际基于排列方向（ltr，rtl），match-parent类似于inherit，ie和Opera不支持star|end属性值；

text-align-last:auto | left | right | center| justify | start |end 可以改变段落最后一行的对齐方式，但是在IE中只有在text-align：justify的设置前提下才取作用，另外safari和移动端都不支持，所以仅作了解此处不做更多的解释；

text-justify是伴随text-align：justify而存在的一个属性，因为仅支持IE所以此处不作更多的解释；

用法

text-align:justify 不处理块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）及被强制打断的行的两端对齐，但会处理除此之外的其它行，所以只需要将这里的单行变成多行即可，那么我们可以使用伪对象的方式派生出新行，这样不需要额外处理html代码，然后再将派生出的新行隐藏:

.list{  width: 500px;  margin-top: 30px;  font-size: 0;  /*模块使用[换行符]或[空格符]后，webkit浏览器中会引起最后一个模块有多余空白，使用font-size:0可清除该空格*/  text-align: justify;  text-align-last: justify;}
  width: 500px;
  margin-top: 30px;
  font-size: 0;
  /*模块使用[换行符]或[空格符]后，webkit浏览器中会引起最后一个模块有多余空白，使用font-size:0可清除该空格*/
  text-align: justify;
  text-align-last: justify;
}
.list:after{  display: inline-block;  content: '';  width: 100%;  height: 0;}
  display: inline-block;
  content: '';
  width: 100%;
  height: 0;
}

参考：

css实现两端对齐的3种方法

display:inline-block/text-align:justify下列表的两端对齐布局

后记

在css3中flex布局中，两端对齐方法更简便，但兼容性的处理需要认真归纳所以打算另记一篇总结记录。