css文章段落两端对齐代码
text-align:justify
text-align样式的定义就是block块状元素中的inline内容（包括inline,inline-block的元素，文本）的对齐方式。
text-align有几种常用的对齐方式，左对齐，右对齐，居中对齐，两端对齐。而justify的作用就是两端对齐的作用。
text-align的几种对齐方式的效果
text-align:left的效果
.letter_cont{ background:#f1f1f1; border:1px solid #bababa; margin:20px; padding:20px; font-size:13px; line-height:2; text-align:left;}<div class="letter_cont"> 妹纸前端拥有最基础的前端技巧和前端思考方式。 </div> |
效果如下：
text-align:left时文字都靠左对齐，并且block元素内的对齐方式就是左对齐的。
text-align:right的效果
.letter_cont{ background:#f1f1f1; border:1px solid #bababa; margin:20px; padding:20px; font-size:13px; line-height:2; text-align:right;} |
效果如下：
text-align:right的效果使得文字靠右对齐，把空白位置留在了左边。
text-align:center居中对齐
.letter_cont{ background:#f1f1f1; border:1px solid #bababa; margin:20px; padding:20px; font-size:13px; line-height:2; text-align:center;} |
效果如下：
text-align:center对齐的作用是使得文字居中对齐，把空白留在了两边。
text-align:justify的神奇效果
.letter_cont{ background:#f1f1f1; border:1px solid #bababa; margin:20px; padding:20px; font-size:13px; line-height:2; text-align:justify;} |
效果如下：
哎，怎么没有效果呢？跟text-align:left的效果怎么一样呢？不是两端对齐么，难道浏览器不支持？
no,no,no,不是不支持，是因为text-align:justify对block中的文本的最后一行没有对齐作用。
既然这样，那么我们就多加几行文本来看看效果：
<div class="letter_cont"> 妹纸前端拥有最基础的前端技巧和前端思考方式<Br/> 第一个参数是颜色值，表示text-shadow属性的文本的阴影的颜色<Br/> 第二个参数是横向偏移量，表示text-shadow文本阴影的横向阴影的大小 </div> |
效果如下：
啊啊啊....,好像还是没有作用，这个样式真讨厌，你说不管最后一行，依着你，多给你来两行，你还闹脾气，照样没效果，你到底要闹哪样呀，到底能不能好好玩耍了?!
嘿嘿嘿！别急，听我慢慢解释，上面虽然多加了两行，但是都是用<br/>标签来换行的，这样text-align:justify还是认为你每一行都是最后一行，它认可的行是指因为过长而自然换行的。
为了有对比性，我们先看没有text-align:justify的效果，好有个对比
.letter_cont{ background:#f1f1f1; border:1px solid #bababa; margin:20px; padding:20px; font-size:13px; line-height:2;}<div class="letter_cont"> 妹纸前端拥有最基础的前端技巧和前端思考方式，第一个参数是颜色值， 表示text-shadow属性的文本的阴影的颜色， 第二个参数是横向偏移量，表示text-shadow文本阴影的横向阴影的大小。 第三个参数是纵向文本阴影偏移量，表示text-shadow文本阴影的纵向阴影的大小。 第四个参数是模糊度，用来表示text-shado文本阴影的模糊程度的， 使用它能够使阴影更加逼真，更像我们现实中的阴影效果。 妹纸前端拥有最基础的前端技巧和前端思考方式。text-shadow是一个css3的属性， 用来给文本添加阴影。 text-shadow属性有三个参数。 第一个参数是颜色值，表示text-shadow属性的文本的阴影的颜色，第二个参数是横向偏移量， 表示text-shadow文本阴影的横向阴影的大小。 </div> |
文字够多，足够换行了，效果如下：
没有设置text-align样式时，默认是text-align:left左对齐的，所以左边是齐齐整整的，但是右边就参差不齐了。
加上text-align:justify再来看看效果
.letter_cont{ background:#f1f1f1; border:1px solid #bababa; margin:20px; padding:20px; font-size:13px; line-height:2; text-align:justify;} |
效果如下：
果然有效果，右边都对齐了。光看截图可能体会不深，来个demo看看，点击text-align:justify查看效果。
text-align:justify最后一行的两端对齐处理方法
text-align:justify的两端对齐效果对最后一行不起作用，但是有时候我们希望最后一行也能有两端对齐的效果，这时候我们就需要使点手段了。正路走不通，那么就走小路，反正条条小路通罗马。
.letter_cont{ background:#f1f1f1; border:1px solid #bababa; margin:20px; padding:20px; font-size:13px; line-height:2; text-align: justify;}.letter_cont:after{ content:""; display:inline-block; width:100%; line-height:0; font-size:0} |
我们选择的小路就是使用:after伪类添加一个inline-block并且width:100%的最后一行用来掩人耳目。效果如下：
哎，行得通，最有一行果然拉大距离有了两边对齐的效果了。但是似乎有点小小的缺憾，距离div底部的距离怎么加大了？
一回想，明白了，:after伪类添加的空元素撑开了一行内容，父元素根据“line-height:2”认为他有2倍行距的高度，所以就有了下面的空白，那么我们下面就要想法去掉这个空白。
怎么去掉这个空白呢？从上面:after中的样式可以看到"font-size:0","line-height:0"都起不到这个作用的，因为after伪类的这些样式是对它内部的元素起作用的，而它本身的line-height高度是父元素强制添加的，它本身控制不了父元素的line-height高度，所以我们要曲线救国。
<div class="letter_cont" id="alignjustify"> <span class="linejustify"> mm前端 is a 基础的前端 technology self blog,在这里 ,you can learn some useful things.haha,uu,mm,nn ，用来给文本添加阴影。text-shadow属性有三个参数。 第一个参数是颜色值，表示text-shadow属性的文本的阴影的颜色，第二个参数是横向偏移量， 表示text-shadow文本阴影的横向阴影的大小。 第三个参数是纵向文本阴影偏移量，表示text-shadow文本阴影的纵向阴影的大小。 第四个参数是模糊度，用来表示text-shado文本阴影的模糊程度的， 使用它能够使阴影更加逼真，更像我们现实中的阴影效果。 妹纸前端拥有最基础的前端技巧和前端思考方式。text-shadow是一个css3的属性，用来给文本添加阴影。 text-shadow属性有三个参数。 第一个参数是颜色值，表示text-shadow属性的文本的阴影的颜色，第二个参数是横向偏移量， 表示text-shadow文本阴影的横向阴影的大小。 第三个参数是纵向文本阴影偏移量，表示text-shadow文本阴影的纵向阴影的大小。 </span> </div>.letter_cont{ background:#f1f1f1; border:1px solid #bababa; margin:20px; padding:20px; font-size:13px; line-height:0; text-align: justify;}.linejustify{ line-height:28px;}.letter_cont:after{ content:""; display:inline-block; width:100%; line-height:0;} |
我们通过套一层span，把line-height设置在span上，把父元素的line-height设置为0，效果如下：
效果很不错，最后一行不但实现了两端对齐，并且div也没有被空白撑高。但是注意一点，经测试IE8对text-align:justify对文字的处理不是太理想，不要报太高期望。
text-align:justify对inline-block的两端对齐效果。
.justifyinlineblock{ margin:20px; padding:20px; list-style: none; background:#f1f1f1; border:1px solid #bababa; text-align:justify;}.justifyinlineblock:after{ content:""; display: inline-block; width:100%; height:0;}.justifyinlineblock li{ display:inline-block; width:100px; height:100px; margin:12px;}.justifyinlineblock li img{ width:100%; height:100%;}<ul class="justifyinlineblock"> <li><img src="images/resizeApi.png"/></li> <li><img src="images/resizeApi.png"/></li> <li><img src="images/resizeApi.png"/></li> <li><img src="images/resizeApi.png"/></li> <li><img src="images/resizeApi.png"/></li> <li><img src="images/resizeApi.png"/></li> <li><img src="images/resizeApi.png"/></li> <li><img src="images/resizeApi.png"/></li> <li><img src="images/resizeApi.png"/></li> <li><img src="images/resizeApi.png"/></li></ul> |
我们还是利用:after伪类来处理最后一行的两端对齐方式。因为我们的inline-block的元素没有在父元素设置line-height属性，所以不用再套一层元素。
效果如下：
完美的两端对齐模式，IE下对他们处理的效果也是很满意的。还是觉得光给截图不够真切，还是来个demo打开体验一下比较好，你可以改变浏览器的大小来看他们的两端对齐的效果。
text-align:justify结语
text-align是老样式了，并且text-align:justify也不是什么新属性，但是还是有很多前端对他们理解不是很透彻，尤其是一些前端妹纸，对他们有些似懂非懂，所以想来还是写了这篇文章来详细介绍text-align:justify的应用和作用。
