[分享]css两端对齐怎么弄

CSS中的两端对齐可以使文本在一个元素的水平空间中平均分布出去，这种对齐方式非常简单，只需要使用text-align:justify属性

.text-justify{
   text-align:justify;
} 

但是有时候这种对齐方式可能会使文本末尾产生奇怪的空白，这是由于每一行的文本长度都不一样导致的，我们可以通过在末尾使用hack的方式进行处理，为最后一行添加一个透明的伪元素:

.text-justify:after{
    content:';
    display:inline-block;
    width:100%;
    height:0;
} 

此时，我们会发现，文本末尾的奇怪空白已经消失了。但是，这个处理还有一个问题，那就是如果文本中有需要强制换行的子元素，那么这个hack方式就会失效，因为这个伪元素并不会跟着子元素自动换行。

为了解决这个问题，我们可以使用CSS3的新属性text-justify-lines，这个属性可以指定文本需要被划分成几行进行对齐，然后再使用text-align:justify，这样即使文本中有强制换行的子元素，我们也不需要使用上面的hack方式来处理问题了。

.text-justify{
   text-align:justify;
   -webkit-text-justify:inter-word;
   text-justify:inter-word;
   -moz-text-align-last:justify;
   text-align-last:justify;
   -moz-justify-content:center;
   justify-content:center;
   text-align:justify-all;/*最新浏览器支持*/
}
.text-justify-2{
    text-justify-lines:2;
} 

总的来说，CSS的两端对齐并不复杂，只需要使用text-align:justify属性即可，但是为了处理末尾奇怪的空白以及强制换行子元素对两端对齐的影响，我们需要进行一些hack处理，或者使用CSS3的新属性text-justify-lines。