text-align-last

Avatar of Marie Mosley
Marie Mosley

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

text-align-last 允许您控制强制换行符之前最后一行(或唯一一行)文本的对齐方式——例如段落的末尾或<br>标签之前的行。

.intro-graph {
  text-align-last: center;
}

在撰写本文时,只有 Mozilla 浏览器和 Internet Explorer 支持 text-align-last(带供应商前缀),并且每个浏览器都有略微不同的实现。该属性原本应该在 Chrome 35 中开始工作,但截至 Chrome 40,它仍然需要实验性 Web 平台标志。有关浏览器实现的更多详细信息,请参阅 关注点

  • left 将文本的最后一行与容器的左侧对齐。
  • right 将文本的最后一行与容器的右侧对齐。
  • center 将文本的最后一行在容器内居中。
  • justify 使文本的最后一行两端对齐,使其跨越容器的整个宽度,如果需要增加行长,则在单词之间插入空格。
  • start 根据文本的方向将文本与行的“开头”对齐——对于 LTR 语言,为左侧;对于 RTL 语言,为右侧。
  • end 根据文本的direction将最后一行与行的“结尾”对齐——对于 LTR 语言,为右侧;对于 RTL 语言,为左侧。
  • auto 默认值。将文本的最后一行与元素的text-align属性匹配,如果已设置。如果未设置,则auto 将文本与开头对齐。
  • inherit 应用父元素的 text-align-last 属性。

演示

此演示展示了不同的 text-align-last 值的实际效果。注意:Internet Explorer 不支持 startend 值。

查看 CSS-Tricks 的 CodePen 上的笔 text-align-last@css-tricks)。

关注点

在 Internet Explorer 中,只有当所选元素中其余文本的 text-align 设置为 justify 时,text-align-last 才能工作。此外,IE 无法识别 startend 值。

在 Mozilla 浏览器中,即使未为元素中的其余文本指定任何对齐方式,text-align-last 也会在强制换行符之前的最后一行上工作。

还值得注意的是,text-align-last 会为所选元素中的所有最后一行设置对齐方式,而不仅仅是文本的绝对最后一行。因此,例如,如果您有一个包含五个段落的 div,则您的 text-align-last 声明将应用于每个段落的最后一行。

如果您只想对容器中的最后一行使用 text-align-last,则可以使用 :last-child:last-of-type。您的 CSS 将如下所示

#center-only-last p:last-child {
  -ms-text-align-last: center;
  -moz-text-align-last: center;
  text-align-last: center;
}

在下面的演示中,左侧显示将 text-align-last: center; 应用于包含多个段落的 div。请注意,每个段落的最后一行都居中。右侧显示仅使用 :last-childtext-align-last: center; 应用于 div 内的最后一个段落。

查看 CSS-Tricks 的 CodePen 上的笔 text-align-last@css-tricks)。

相关

更多信息

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
35+(带实验性标志) 不支持 34+(带前缀) 不支持 5.5+(带前缀) 不支持 不支持