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 不支持 start
或 end
值。
查看 CSS-Tricks 的 CodePen 上的笔 text-align-last(@css-tricks)。
关注点
在 Internet Explorer 中,只有当所选元素中其余文本的 text-align
设置为 justify
时,text-align-last
才能工作。此外,IE 无法识别 start
或 end
值。
在 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-child
将 text-align-last: center;
应用于 div 内的最后一个段落。
查看 CSS-Tricks 的 CodePen 上的笔 text-align-last(@css-tricks)。
相关
更多信息
- CSS 文本模块级别 3 (W3C) 中的 text-align-last
- MDN 上的 text-align-last
- MSDN 上的 text-align-last
- Adobe Web 平台团队博客上的 text-align-last
- Webkit Bug 76173,关于 Chrome 对
text-align-last
的实现
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
35+(带实验性标志) | 不支持 | 34+(带前缀) | 不支持 | 5.5+(带前缀) | 不支持 | 不支持 |
如果只有一行文本,它也被认为是“最后一行”,这可能不是你想要的。
如果元素显示为弹性盒子,那么如果第一行也是最后一行,
text-align-last
似乎不会应用。从本文的最后一个codepen中,测试这个:
#center h2 {display:flex;}
或分叉的笔:http://codepen.io/gc-nomade/pen/pemOJR