CSS中有一個很實用的屬性——text-align。它可以讓我們控制文本的對齊方式,你可以將文本居中、左對齊、右對齊、兩端對齊等等。但你知道嗎?text-align還可以控制文本的最后一行的對齊方式。接下來讓我們來學(xué)習(xí)一下關(guān)于CSS文本最后一行的一些知識。
/* 控制最后一行左對齊 */ text-align-last: left; /* 控制最后一行右對齊 */ text-align-last: right; /* 控制最后一行居中 */ text-align-last: center; /* 控制最后一行兩端對齊 */ text-align-last: justify; /* 控制最后一行與前面文本的對齊方式保持一致 */ text-align-last: inherit;
在這里我們不得不提一下text-align-last的兼容問題。由于該屬性是CSS3新增加的,在一些低版本的瀏覽器中可能無法使用。但我們并不需要擔(dān)心這個問題,因為還有更好的解決方案——text-justify。使用text-justify屬性可以實現(xiàn)文本兩端對齊的效果,并且它還沒有兼容性問題。
/* 文本兩端對齊 */ text-justify: inter-word; /* 中文文本兩端對齊 */ text-justify: distribute-all-lines;
text-justify可以將文本兩端對齊,它有兩個取值:inter-word和distribute-all-lines。inter-word是默認(rèn)值,它只是將每個單詞看作一個整體并兩端對齊。如果我們需要針對中文進(jìn)行處理,可以設(shè)置distribute-all-lines,它會將每一行文本按照字符寬度進(jìn)行分布,然后兩端對齊。
CSS文本屬性還有很多,上面只是text-align-last和text-justify的一個簡單介紹,希望對你有所幫助。在實際應(yīng)用中,我們可以根據(jù)設(shè)計要求來選擇最適合的樣式。