text-justify

這個屬性不怎么常用，因為它的兼容性不好，只兼容 IE 瀏覽器，它主要是給對齊屬性text-align:justify做一個補充。

1. 官方定義

改變字與字之間的間距使得每行對齊。

2. 慕課解釋

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

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

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

3. 語法

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

屬性值說明

4. 兼容性

5. 實例

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">
        輕輕的我走了，
        正如我輕輕的來；
        我輕輕的招手，
        作別西天的云彩。
        那河畔的金柳，
        是夕陽中的新娘；
        波光里的艷影，
        在我的心頭蕩漾。
        軟泥上的青荇，
        油油的在水底招搖；
        在康河的柔波里，
        我甘心做一條水草！
    </div>

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

效果圖

說明：這兩端字符第一段是英文，第二段是中文他們都沒有實現(xiàn)兩端對齊。中文還好，英文的排版最差，這是因為英文單詞不像漢字，它長短不一。

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

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

.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;           
}

效果圖

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

3. 使用 inter-ideograph 來實現(xiàn)文字對齊。

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

效果圖

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

4. 使用 inter-word 來實現(xiàn)文本排版對齊。

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

效果圖

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

5. 使用 inter-cluster 來實現(xiàn)文本排版對齊。

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

效果圖

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

6. 小結(jié)

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