text-align-last

Baseline 已广泛支持

此功能已成熟，并可在多种设备和浏览器版本上运行。自 2022 年 9 月起，所有浏览器都已支持此功能。

text-align-last CSS 属性设置块或行（在强制换行符之前）的最后一行如何对齐。

试一试

text-align-last: right;

text-align-last: center;

text-align-last: left;

<section id="default-example">
  <div>
    <p id="example-element">
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat.
    </p>
  </div>
</section>

section {
  font-size: 1.5em;
}

#default-example > div {
  width: 250px;
}

#example-element {
  text-align: justify;
}

语法

css

/* Keyword values */
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

/* Global values */
text-align-last: inherit;
text-align-last: initial;
text-align-last: revert;
text-align-last: revert-layer;
text-align-last: unset;

值

auto: 受影响的行按照 text-align 的值对齐，除非 text-align 为 justify，在这种情况下，效果与将 text-align-last 设置为 start 相同。
start: 如果方向是从左到右，则与 left 相同；如果方向是从右到左，则与 right 相同。
end: 如果方向是从左到右，则与 right 相同；如果方向是从右到左，则与 left 相同。
left: 行内内容与行框的左边缘对齐。
right: 行内内容与行框的右边缘对齐。
center: 行内内容在行框中居中对齐。
justify: 文本两端对齐。文本的左右边缘应与段落的左右内容边缘对齐。

正式定义

初始值	`auto`
应用于	块容器
继承性	是
计算值	同指定值
动画类型	离散

正式语法

text-align-last = 
  auto          |
  start         |
  end           |
  left          |
  right         |
  center        |
  justify       |
  match-parent

示例

最后一行两端对齐

<p>
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

CSS

css

p {
  font-size: 1.4em;
  text-align: justify;
  text-align-last: center;
}

结果

规范

规范
CSS Text Module Level 3 # text-align-last-property

浏览器兼容性

另见

text-align

帮助改进 MDN

了解如何贡献

此页面上次由 MDN 贡献者在 2025 年 7 月 14 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题