text-align:justify

text-align:justify，这东西主要应用于实现两端对齐文本效果，当我们有大篇幅的文本内容时，文字换行会出现文本两端不居中的情况。

我们想让其美观一点，在其文本标签加上text-align:justify文字就实现了两端对其了，当然，这个兼容性还是挺不错的，ie的话再加上text-justify: inter-ideograph基本上都能实现对其，但是也有一些怪异的情况，比如在手机上一些手机自带的浏览器，还有uc浏览器(手机浏览器中的ie)是不生效的，我还得再加上word-break: break-all告诉浏览器我们要进行断句了，让其允许在单词内换行，这样也就实现了对齐了。

p{
    text-align: justify;
    text-justify: inter-ideograph;
    word-break: break-all;
}

当然，text-align:justify如果就这点东西，我也不会专门拿来写这篇博客(能凑凑数还是可以的)，目前很多人在写多列均匀布局都是使用的flex和它的兄弟-webkit-box，用肯定是非常好用，但是最蛋疼的问题是兼容性不是那么的好，移动端加了-webkit-前缀基本上没啥问题，但是ie这个东西是你要做兼容的话是绕不开的，只得放弃好用的了，当然你也可以用table布局，用js计算什么的，当时感觉为了一个均匀布局太不划算了。这时需要我们的主角text-align:justify来当救世主了，巧妙的使用text-align:justify可以实现多列均匀布局，并且兼容性强大，ie6什么的不在话下。

许多人直接用text-align:justify时发现并不能实现两端对其，而且有时用jq添加节点时也对其不了，其实要让text-align:justify生效你得满足几个条件才行：
首先text-align:justify，顾名思义，其子标签必须是inline-block或者inline，并且它不会处理被打断的行和最后一行。也就是说当你的行数只有一行时，text-align不会生效的，所以我们要处理一下，伪造一个最后一行，让你的行数不是处于最后。可以用父标签的:after进行伪造。

<div class="justify">
    <div class="item">
        <span>1</span>
        <p>第一，绝对不意气用事</p>
    </div>
    <div class="item">
        <span>2</span>
        <p>第二，绝对不漏判任何一件坏事</p>
    </div>
    <div class="item">
        <span>3</span>
        <p>第三，绝对裁判的公正漂亮</p>
    </div>
</div> 

.justify{
    text-align: justify;
    text-justify: inter-ideograph;
        }
.justify .item{
    display:inline-block;
    *zoom:1;
    *display: inline;
    text-align: center;
}
.justify:after{
    content: '';
    width: 100%;
    position: relative;
    display: inline-block;
}

但是ie8以下可不认这个东西，要兼容ie的话我们可以在父标签html的最后加个ie版本判断的html语句（inline-block也要注意兼容），当时ie8以下时我们显示一个空的文本标签。两者同时运用没啥冲突，基本上完美兼容了。

.justify b{
            display: inline-block;
            position:relative;
            height:0px;
            width:100%;
} 

    <div class="justify">
        ......
         <!--[if lte IE 7]>
        <b></b>
        <![endif]-->
    </div> 

有时候我们用jq进行动态添加时发现css也用了，怎么还是不能对其，那是因为对其还要有个条件，就是子元素必须要有间隙，不能紧挨着。比如：

<div class="justify">
    <i>1</i><i>2</i><i>3</i><i>4</i>
         <!--[if lte IE 7]>
        <b></b>
        <![endif]-->
    </div> 

这种事不能对齐的，所以在压缩html的时候要注意一下，当然jq动态添加你要留个空格什么的，不然也不能对齐。比如

$(".justify").append("<i>1</i> ") //注意括号里面要留空格

好了，看个示列吧，ie6没试过，不过两端对齐应该没啥显示问题，js效果的话要ie8哦：

本文示例：链接

本文代码地址：链接