text-align-last

語法:

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

預設值auto

適用於:塊容器

繼承性:有

動畫性:否

計算值:指定值

媒 體:視覺

取值:

auto:
無特殊對齊方式。
left:
內容左對齊。
center:
內容居中對齊。
right:
內容右對齊。
justify:
內容兩端對齊。
start:
內容對齊開始邊界。
end:
內容對齊結束邊界。

說明:

定義塊內文字內容的最後一行(包括塊內僅有一行文字的情況,這時既是第一行也是最後一行)或者被強制打斷的行的對齊方式
  • 對於text-align-last來講,一個塊內文字內容可能會存在多個最後一行,如下例:

    如何區別最後一行:

    <div class="demo">一個塊內文字內容可能會存在多個所謂的最後一行<br />這些最後一行都是 text-align-last 的服務範圍</div>
    一個塊內文字內容可能會存在多個所謂的最後一行
    這些最後一行都是 text-align-last 的服務範圍
    .demo { width: 200px; background: #eee; }

    如上,我們將一段文字置入寬度為 200px 的 .demo 元素中,這段文字被 br 元素強制打斷了,所有我們能看到這段文字最終顯示為了 4 行,此時對於 text-align-last 來講,將有 2 個最後一行:

    • 最後一行(即例子中的第4行,真實的最後一行)
    • 第二行(因為第二行是被 br 強制打斷的,所以該行也將被當成最後一行)

    這意味著第2行與第4行都無法通過 text-align: justify 來實現兩端對齊,而需要使用 text-align-last

    一個塊內文字內容可能會存在多個所謂的最後一行
    這些最後一行都是 text-align-last 的服務範圍
    .demo { text-align: justify; /* 作用於1,3兩行 */ text-align-last: justify; /* 作用於2,4兩行 */ }
  • 作為IE的私有屬性之一,IE5.5率先實現了text-align-last,後期被w3c采納成標准屬性;
  • IE7及以下瀏覽器只實現了塊內最後一行的對齊方式,沒有處理被強制打斷的行的對齊方式,從IE8開始,這兩種形式的行對齊都被支援;
  • IE瀏覽器下,如果text-align-last要生效,必須先定義text-alignjustify
  • 查看 form表單標簽名兩端對齊效果demo
  • 對應的腳本特性為:textAlignLast

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0-48.0 -moz- 40.0-46.0 8.0-11.0 40.0+ 8.0-11.3 4.4-46.0 28.0-46.0
49.0+ 47.0+ 47.0+ 47.0+
start | end 8.0-11.0 40.0-48.0 -moz- 40.0-46.0 8.0-11.0 40.0+ 8.0-11.3 4.4-46.0 28.0-46.0
12.0+ 49.0+ 47.0+ 47.0+ 47.0+

示例: