您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

text-justify 对齐

这个不怎么常用,因为它的兼容性不好,只兼容 IE 浏览器,它主要是给对齐text-align:justify做补充。

改变字与字之间距使得每行对齐。

这个主要用来的排版,如果我们段落不设置任何,那么它的每一行有长有短,很不美观,通过这个,可以让每一行都能实现左右对齐。

我们首先要设置text-align:justify然后再设置text-justify去告诉浏览器使用什么样的排版方式让对齐。而不设置text-justify浏览器则使用认的方式让其实现两端对齐。

这个只兼容 IE 浏览器。而其他浏览器的对齐方式仅受text-align:justify对齐方式的影响。

.demo{
    text-align:justify;
    text-justify:inter-word;
}

值说明

    <div class="demo">
        To a large degree,
        the measure of our peace of mind
        is deterd by how much we are
        able to live in the present moment.
    </div>
    <div class="demo-1">
        轻轻的我走了,
        正如我轻轻的来;
        我轻轻的招手,
        作别西天的云彩。
        那河畔的金柳,
        是夕阳中的新娘;
        波光里的艳影,
        在我的心头荡漾。
        软泥上的青荇,
        油油的在水底招摇;
        在康河的柔波里,
        我甘心做一条水草!
    </div>
.demo{
    background: #f2f2f2;
    margin-bottom: px;
}
.demo-1{
    background: #a2a2a2;            
}

说明:这两端字符第一段是英文,第二段是他们都没有实现两端对齐。还好,英文的排版最差,这是因为英文单词不像汉字,它长短不一。

下面我们通过设置text-justify中包含的各种来看看,他们都是怎么实现两端对齐的。

.demo{
    background: #f2f2f2;
    margin-bottom: px;
    text-align:justify;   
}
.demo-1{
    background: #a2a2a2;   
    text-align:justify;            
}

.demo{
    background: #f2f2f2;
    margin-bottom: px;
    text-align:justify;   
    text-justify:auto; 
}
.demo-1{
    background: #a2a2a2;   
    text-align:justify;  
    text-justify:auto;           
}

说明:直接设置text-align:justify;就会实现两端对齐,对齐方式使用浏览器认方式。

.demo{
    background: #f2f2f2;
    margin-bottom: px;
    text-align:justify;   
    text-justify: inter-ideograph;
}
.demo-1{
    background: #a2a2a2;   
    text-align:justify;  
    text-justify: inter-ideograph;    
}

说明:通过设置inter-ideograph,让IE浏览器使用表意文本对齐方式对齐 。

.demo{
    background: #f2f2f2;
    margin-bottom: px;
    text-align:justify;   
    text-justify: inter-word;
}
.demo-1{
    background: #a2a2a2;   
    text-align:justify;  
    text-justify: inter-word;    
}

说明:如图所示,还是对齐了,如果和 inter-ideograph 的图对比还是有细微差别,它的对齐方式了单词之距离。所以说这只是 IE浏览器在对齐的时候一种排版方式。

.demo{
    background: #f2f2f2;
    margin-bottom: px;
    text-align:justify;   
    text-justify: inter-cluster;
}
.demo-1{
    background: #a2a2a2;   
    text-align:justify;  
    text-justify: inter-cluster;    
}

由此可见使用其他distributekashida都只是改变 IE 浏览器的一种对齐方式。


联系我
置顶