CSS text-align-last 属性 详解
CSS text-align-last 属性
定义和用法
text-align-last 属性规定如何对齐文本的最后一行。
请注意，text-align-last 属性设置的是被选元素内的所有最末行。所以，如果一个 <div> 中有三个段落，text-align-last 会应用于每段的最后一行。如需在容器中的最后一段上使用 text-align-last，您可使用 :last child，请看下面的例子。
注释：在 Edge/Internet Explorer 中，text-align-last 属性仅适用于具有 "text-align: justify" 的文本。
另请参阅：
CSS 教程：CSS 文本
HTML DOM 参考手册：textAlignLast 属性
实例
对齐三个 <div> 元素中的最后一行：
div.a {
text-align: justify; /* 针对 Edge */
text-align-last: right;
}
div.b {
text-align: justify; /* 针对 Edge */
text-align-last: center;
}
div.c {
text-align: justify; /* 针对 Edge */
text-align-last: justify;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
text-align: justify; /* For Edge */
-moz-text-align-last: right; /* 针对 58.0 之前的 Firefox */
text-align-last: right;
}
div.b {
text-align: justify; /* For Edge */
-moz-text-align-last: center; /* 针对 58.0 之前的 Firefox */
text-align-last: center;
}
div.c {
text-align: justify; /* For Edge */
-moz-text-align-last: justify; /* 针对 58.0 之前的 Firefox */
text-align-last: justify;
}
</style>
</head>
<body>
<h1>text-align-last 属性</h1>
<h2>text-align-last: right:</h2>
<div class="a">
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
<h2>text-align-last: center:</h2>
<div class="b">
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
<h2>text-align-last: justify:</h2>
<div class="c">
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
可以在页面下方找到更多 TIY 实例。
CSS 语法
text-align-last: auto|left|right|center|justify|start|end|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| auto |
默认值。每一行的对齐规则由 text-align 的值来确定。 当 text-align 的值是 justify，text-align-last 的表现和设置了 start 的表现是一样的。 |
| left | 最后一行向左对齐。 |
| right | 最后一行向右对齐。 |
| center | 最后一行居中对齐。 |
| justify | 最后一行文字的开头与内容盒的左侧对齐，末尾与右侧对齐。 |
| start |
最后一行在行起点对齐。 如果 text-direction 为从左到右，则左对齐，如果 text-direction 为从右到左，则右对齐。 |
| end |
最后一行在行末尾对齐。 如果 text-direction 为从左到右，则右对齐，如果 text-direction 为从右到左，则左对齐。 |
| initial | 将此属性设置为其默认值。参阅 initial。 |
| inherit | 从其父元素继承此属性。参阅 inherit。 |
技术细节
| 默认值： | auto |
|---|---|
| 继承： | 是 |
| 动画制作： | 不支持。请参阅：动画相关属性。 |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.textAlignLast="right" |
更多实例
在容器中的最后一行上使用 text-align-last：
div.b p:last-child {
text-align-last: center;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
text-align: justify; /* 针对 Edge */
-moz-text-align-last: center; /* 针对 58.0 之前的 Firefox */
text-align-last: center;
}
div.b {
text-align: justify; /* 针对 Edge */
}
div.b p:last-child {
-moz-text-align-last: center; /* 针对 58.0 之前的 Firefox */
text-align-last: center;
}
</style>
</head>
<body>
<h1>text-align-last 属性</h1>
<h2>text-align-last: center（影响所有段落）：</h2>
<div class="a">
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
<h2>text-align-last: center;（只影响最后一段）：</h2>
<div class="b">
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
带 -moz- 的数字表示使用前缀的首个版本。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 47.0 | 5.5* | 49.0 12.0 -moz- |
不支持 | 34.0 |
* 在 Edge/Internet Explorer, 不支持 "start" 和 "end" 值。
