text-justify

這個(gè)屬性不怎么常用，因?yàn)樗募嫒菪圆缓?，只兼?IE 瀏覽器，它主要是給對(duì)齊屬性text-align:justify做一個(gè)補(bǔ)充。

1. 官方定義

改變字與字之間的間距使得每行對(duì)齊。

2. 慕課解釋

這個(gè)屬性主要用來(lái)頁(yè)面文字的排版，如果我們一個(gè)段落不設(shè)置任何屬性，那么它的每一行有長(zhǎng)有短，很不美觀(guān)，通過(guò)這個(gè)屬性，可以讓每一行都能實(shí)現(xiàn)左右對(duì)齊。

我們首先要設(shè)置text-align:justify然后再設(shè)置text-justify去告訴瀏覽器使用什么樣的排版方式讓文字對(duì)齊。而不設(shè)置text-justify瀏覽器則使用默認(rèn)的方式讓其實(shí)現(xiàn)兩端對(duì)齊。

這個(gè)屬性只兼容 IE 瀏覽器。而其他瀏覽器的對(duì)齊方式僅受text-align:justify對(duì)齊方式的影響。

3. 語(yǔ)法

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

屬性值說(shuō)明

4. 兼容性

5. 實(shí)例

1. 默認(rèn)文字排版。

    <div class="demo">
        To a large degree，
        the measure of our peace of mind
        is determined by how much we are
        able to live in the present moment．
    </div>
    <div class="demo-1">
        輕輕的我走了，
        正如我輕輕的來(lái)；
        我輕輕的招手，
        作別西天的云彩。
        那河畔的金柳，
        是夕陽(yáng)中的新娘；
        波光里的艷影，
        在我的心頭蕩漾。
        軟泥上的青荇，
        油油的在水底招搖；
        在康河的柔波里，
        我甘心做一條水草！
    </div>

.demo{
    background: #f2f2f2;
    margin-bottom: 10px;
}
.demo-1{
    background: #a2a2a2;            
}

效果圖

說(shuō)明：這兩端字符第一段是英文，第二段是中文他們都沒(méi)有實(shí)現(xiàn)兩端對(duì)齊。中文還好，英文的排版最差，這是因?yàn)橛⑽膯卧~不像漢字，它長(zhǎng)短不一。

下面我們通過(guò)設(shè)置text-justify中包含的各種屬性來(lái)看看，他們都是怎么實(shí)現(xiàn)兩端對(duì)齊的。

2. 使用瀏覽器默認(rèn)對(duì)齊方式。

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

或

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

效果圖

說(shuō)明：直接設(shè)置text-align:justify;就會(huì)實(shí)現(xiàn)文字兩端對(duì)齊，對(duì)齊方式使用瀏覽器默認(rèn)方式。

3. 使用 inter-ideograph 來(lái)實(shí)現(xiàn)文字對(duì)齊。

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

效果圖

說(shuō)明：通過(guò)設(shè)置inter-ideograph，讓IE瀏覽器使用表意文本對(duì)齊方式對(duì)齊內(nèi)容 。

4. 使用 inter-word 來(lái)實(shí)現(xiàn)文本排版對(duì)齊。

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

效果圖

說(shuō)明：如圖所示，文字還是對(duì)齊了，如果和 inter-ideograph 的效果圖對(duì)比還是有細(xì)微差別，它的對(duì)齊方式修改了單詞之間的距離。所以說(shuō)這只是 IE瀏覽器在對(duì)齊的時(shí)候一種排版方式。

5. 使用 inter-cluster 來(lái)實(shí)現(xiàn)文本排版對(duì)齊。

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

效果圖

由此可見(jiàn)使用其他屬性distribute、kashida都只是改變 IE 瀏覽器的一種對(duì)齊方式。

6. 小結(jié)

1. 要使用這個(gè)屬性一定要先設(shè)置 text-align:justify;
2. 且僅僅兼容 IE 瀏覽器。