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哦:

本文示例:链接
本文代码地址:链接

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注