CSS text-align-last 属性

CSS text-align-last 属性描述的是一段文本中最后一行在被强制换行之前的对齐规则。

实例

对齐三个 <div> 元素中的最后一行：

<!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>
<h2>text-align-last 属性</h2>
<h2>text-align-last: right:</h2>
<div class="a">
  <p>上海是中华人民共和国四个直辖市之一。欢迎来到上海！</p>
</div>
<h2>text-align-last: center:</h2>
<div class="b">
  <p>上海是中华人民共和国四个直辖市之一。欢迎来到上海！</p>
</div>
<h2>text-align-last: justify:</h2>
<div class="c">
  <p>上海是中华人民共和国四个直辖市之一。欢迎来到上海！</p>
</div>
</body>
</html>

运行一下

定义和用法

text-align-last 属性规定如何对齐文本的最后一行。

请注意，text-align-last 属性设置的是被选元素内的所有最末行。所以，如果一个 <div> 中有三个段落，text-align-last 会应用于每段的最后一行。如需在容器中的最后一段上使用 text-align-last，您可使用 :last child，请看下面的例子。

注释：在 Edge/Internet Explorer 中，text-align-last 属性仅适用于具有 "text-align: justify" 的文本。

默认值：	auto
继承：	是
动画制作：	不支持。请参阅：动画相关属性。
版本：	CSS3
JavaScript 语法：	object.style.textAlignLast="right"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -moz- 的数字表示使用前缀的首个版本。

属性
text-align-last	47.0	5.5*	49.012.0 -moz-	不支持	34.0

在 Edge/Internet Explorer, 不支持 "start" 和 "end" 值。

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。

更多实例

在容器中的最后一行上使用 text-align-last：

<!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>
<h2>text-align-last 属性</h2>
<h2>text-align-last: center（影响所有段落）：</h2>
<div class="a">
  <p>上海是中华人民共和国四个直辖市之一。欢迎来到上海！</p>
  <p>上海是中华人民共和国四个直辖市之一。欢迎来到上海！</p>
  <p>上海是中华人民共和国四个直辖市之一。欢迎来到上海！</p>
</div>
<h2>text-align-last: center;（只影响最后一段）：</h2>
<div class="b">
  <p>上海是中华人民共和国四个直辖市之一。欢迎来到上海！</p>
  <p>上海是中华人民共和国四个直辖市之一。欢迎来到上海！</p>
  <p>上海是中华人民共和国四个直辖市之一。欢迎来到上海！</p>
</div>
</body>
</html>