如何跨瀏覽器對齊 DIV 中最後一行文字？

對齊DIV 的最後一行

儘管原始查詢中提出了邏輯問題，但我們可以闡明如何進行文字對齊：對齊DIV 中的最後一行 DIV。通常情況下，該終端行通常會向左對齊，而不是遵循文字對齊規則。

為了解決這個問題，我們提出了一個跨多個瀏覽器（包括 IE6 及更高版本）相容的全面解決方案。

跨瀏覽器方法

此方法利用了兩個關鍵技巧：

text-align-last: justify;: 此CSS 屬性專門設計用於對齊區塊級元素中的最後一行文字。不過，只有 Internet Explorer 支援。

:after Pseudo-Content with Inline-Block:

此技術使用 :after 偽元素插入一個DIV 之後不可見的內聯塊元素。然後，該元素的寬度設定為 100%，有效地佔據 DIV 的整個寬度，並強製文字在其最大範圍內對齊。

CSS 實作

p, h1 {
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after {
   content: "";
   display: inline-block;
   width: 100%;
}

處理單一內部-Line Text

如果DIV 僅包含一行文本，則需要額外的CSS 規則來防止額外的空白行由:after 偽元素加入。

h1 {
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

h1:after {
   content: "";
   display: inline-block;
   width: 100%;
}

其他資源

有關此技術的更多詳細資訊和見解，請參閱：

[跨瀏覽器CSS：調整最後一行段落文字](http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/)

以上是如何跨瀏覽器對齊 DIV 中最後一行文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！