CSS Text3: text-align-last

在CSS中對於 text-align 而言，大家並不會感到陌生，但對於 text-align-last 來說，知道的人我想並不會太多。那麽今天我們來說一說這個屬性。

有的時候，我們需要制作一個這樣的效果：

大家知道，CSS中的對齊方式，一般都是使用 text-align 來控制的，但要實現上圖的效果，僅使用 text-align 對於我們來說將是一件蛋疼的事情。只能做到下面這樣的效果：

如果要實現圖片一樣的效果，那 text-align-last 將會拯救我們。

text-align-last描述

text-align-last 這個屬性主要用來設置一個塊中的最後一行的對齊方式。

• 一個塊的最後一行
• <br> 標簽斷行的最後一行

text-align-last的使用

接下來，簡單的看看 text-align-last 屬性如何使用。

語法

text-align-last: auto | start | end | left | right | center | justify | inherit

text-align-last 屬性具備 auto 、 start 、 end 、 left 、 right 、 center 和 justify 幾個屬性。此屬性與 text-align 屬性相比少了 match-parent 和 justify-all 。

text-align-last 其默認值是 auto ，而且其只能運用於塊元素上，或者說塊元素的斷行內。對於行內元素來說是無效的。如下面的示例：

屬性值介紹

要徹底了解 text-align-last 屬性的具體使用，那麽必須對其每個屬性值的實際作用有所了解。

auto

如果 text-align-last 取值為 auto 值時，其效果會受 text-align 值所影響。比如下面的示例，我們先給 figcaption 元素設置了 text-align:right ，同時設置 text-align-last 值為 auto 。那麽其效果將會根據 text-align 值來生效。

當然，這也有另外的情況。當 text-align 取值為 justify 時， text-align-last 值為 auto 時並不會根據 text-align:justify 來渲染效果，而是始終會 左邊對齊 。

錄制了一個動畫效果，就中修改 text-align 的值時， text-align-last 為 auto 時對應的各種效果：

start

如果文本排版方向是LTR，那麽文本將左對齊，反之，如果文版排版方向是RTL時，文本右對齊。

如果 text-align-last 取值為 start 時， text-align 取值並不會對其產生任何影響。

end

如果文本排版方向是LTR，那麽文本右對齊；反之，如果文本排版方向是RTL，文本左對齊。

同樣的 text-align 取值不會對 text-align-last:end 有影響。

left

取值為 left 時，最後一行文本會靠容器左邊緣對齊。

right

取值為 right 時，最後一行文本會靠容器右邊緣對齊。

center

取值為 center 時，最後一行文本在容器中水平居中對齊。

justify

取值為 justify 時，文本效果和 text-justify 效果一樣。瀏覽器會根據容器的寬度和內容的多少自動調整詞與詞之間的間距，讓最後一行文本的第一個詞靠容器左邊緣對齊，文本的最後一個詞靠容器的右邊緣對齊。

大家使用 text-align:justify 時就知道，由於文本的內容會造成它與容器兩邊邊緣會有空白間距，一邊解決的方法是通過元素的偽元素創建一條直線，然後再分配其空間。具體的操作可以看早期整理的一篇文章《 Text-align:Justify和RWD 》。

inherit

取值為 inherit 時，將會繼承其父元素的 text-align-last 的取值效果。

來看個效果，咱們動態修改 figure 中的 text-align-last 的值，而 figcaption 的 text-align-last 取值為 inherit 的效果：

有關於 inherit 相關的介紹可以閱讀《 Initial, Inherit, Unset, and Revert 》一文。

註意： 通過上面的示例，我們可以看到 text-align-last 取值為 start 或者 end 時，其效果會受排版方向 direction 的影響。而且取值為 auto 時，其效果會受除 text-align 的 justify 之外其它值的影響。

前面演示的都是英文排版的效果，下面來看一個中文版本的效果：

下面的動態效果圖，修改了 text-align-last 值對中文排版本的效果有何不同：

瀏覽器兼容性

上面詳細介紹了 text-align-last 的使用，以及其不同屬性值所得到的效果。那麽對於一個新屬性，你一定會置問，現在能用嗎？其兼容性好嗎？那麽瀏覽器具體對其支持程度如何，咱不多說，直接看下面的列表：

總結

這篇文章詳細介紹了文本對齊方式的另一個屬性 text-align-last 。其主要作用就是用來設置塊元素最後一行文本的對齊方式。其主要的值有 auto 、 start 、 end 、 left 、 center 、 right 、 justify 和 inherit 。其實很多表現行為和 text-align 的取值非常的類似，其不同的是控制塊元素最後一行文本對齊方式。

擴展閱讀

• CSS Text Module Level 3
• text-align-last
• CSS3 Text, text-align, text-align-last, text-justify
• text-align-last
• text-align-last

大漠

如需轉載，煩請註明出處： http://www.w3cplus.com/css3/text-align-last.html

文章來源：