如何跨浏览器对齐 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中文网其他相关文章！