css3总结之： text-align: justify （两端对齐）
大家都知道 text-align 属性是规定元素中的文本的水平对齐方式，最常用的值是left、right、center，那么justify是什么呢？
在W3C上是这样介绍的：
justify 可以使文本的两端都对齐在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等（但会带来一些问题）
先举个简单例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.demo{
width: 70px;
/*text-align: justify;*/
}
</style>
</head>
<body>
<div class = 'demo'>
<p>飞洒发fd达fasdf省sdf份发f送fdfd大df夫df萨</p>
</div>
</body>
</html>上面例子显示正常
下面我们来说下text-algin:justify属性带来的问题
1.【单行设置text-align:justify不起作用】
先来看个例子：
<p class="center">我是两端对齐文字端对齐文字</p>
.center{
text-align:justify;
}我们发现，段落单行时设置text-align:justify属性无效，查阅后得知（原因如下）：
text-align不会处理被打断的行和最后一行，因为这里的文字只占了一行，也是最后一行了，所以text-align设置为justify不会产生任何效果
解决方法：使用text-align-last，并将其设置为justify。不过不幸的是，text-align-last不是所有浏览器支持。
所以对于不支持text-align-last的，可以在最后一行人工生成两行文本，然后把第二行隐藏了，那么我们要现实的第一行自然就可以实现两端对齐了
这个问题是我在项目中碰到的，由于我发现这个问题不可行，于是各种   各种用。但是发现在safari中微软雅黑不识别 等，于是只能找解决办法。最终在开心网的源代码中找到了解决办法。具体想法是：
首先既然单行不行，那么就用多行。但是怎么用单行呢？——（1）用after或者（2）添加标签，就是在最后一行人工生成两行文本，然后把第二行隐藏了，那么我们要现实的第一行自然就可以实现两端对齐了
方案一：（原理与方案二相同，隐藏第2行；但是需要将span设置为float: left，:after为inline-block）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
width: 100px;
text-align: justify;
float: left;
}
span:after{
content:'.';
width: 100%;
display: inline-block;
overflow: hidden;
height: 0;
}
input{
width: 100px;
}
</style>
</head>
<body>
<div class="demo">
<span>昵称</span>：<input type="text" style = 'width: 100px'><br><br>
<span>电子邮箱</span>：<input type="email" style = 'width: 100px;'>
</div>
</body>
</html>方案二：（添加标签，原理隐藏第2行）
<p class="center">我是两端对齐文字端对齐文字<span></span></p>
.center{
text-align:justify;
}
span{
display:inline-block;
width:100%;
height: 0;
margin: 0;
}
2.【IE兼容问题】
text-align:justify可以使文字两端对齐，但IE下不正常
方案：
ie兼容属性text-justify，给div加上text-justify:inter-ideograph; 在ie下效果就正常了，text-justify只在ie下有用，而且必须和text-align:justify一起使用才有效
3.【应用举例】
如果这个方法排版会是怎样的呢？
<ul class="justify_list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<style type="text/css">
.justify_list{text-align: justify;text-justify:distribute-all-lines;width: 600px;}
li{width:100px; height:100px;background-color: #0086b3;
display: inline-block; list-style:none; }
</style>效果：第二行显示错乱
经过查询才知道原来是text-align:justify 不处理块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）
既然如此，解决方法就简单了：
.justify_list:after {width: 100%;height: 0;margin: 0;display: inline-block;
overflow: hidden;content: '';}总体来说实现得还不错。在排版的时候不需要计算每个列表元素间的margin间距，比用float的时候省事很多。
4.【好处】
简单方便，只要一个简单的text-align:justify声明，里面的元素就自动等间距两端对齐布局啦！根本无需计算每个列表元素间的margin间距，更不用去修改父容器的宽度
【总结】
①text-align一行文本不进行处理，还有就是强制换行的也不处理
.