CSS 属性 text-align-last 描述的是一段文本中最后一行在被强制换行之前的对齐规则。
/* 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: unset;
| 初始值 | auto |
|---|---|
| 适用元素 | block containers |
| 是否是继承属性 | yes |
| 适用媒体 | visual |
| 计算值 | as specified |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
属性值
auto- 每一行的对齐规则由
text-align的值来确定，当text-align的值是justify，text-align-last的表现和设置了start的表现是一样的，即如果文本的展示方向是从左到右，则最后一行左侧对齐与内容盒子。 -
译者注：
经测试，当text-align的值为right，并且text-align-last设置为auto时，文本最后一行的对齐方式相当于text-align-last被设置为right时的效果。即text-align-last设置为auto后的表现跟text-align的设置有关。 start- 与
direction的设置有关。
如果文本展示方向是从左到右，起点在左侧，则是左对齐；
如果文本展示方向是从右到左，起点在右侧，则是右对齐。
如果没有设置direction，则按照浏览器文本的默认显示方向来确定。 end- 与
direction的设置有关。
如果文本展示方向是从左到右，末尾在右侧，则是右对齐；
如果文本展示方向是从右到左，末尾在左侧，则是左对齐。
如果没有设置direction，则按照浏览器文本的默认显示方向来确定。 left- 最后一行文字与内容盒子的左侧对齐
right- 最后一行文字与内容盒子的右侧对齐
center- 最后一行文字与内容盒子居中对齐
justify- 最后一行文字的开头语内容盒子的左侧对齐，末尾与右侧对齐。
语法
auto | start | end | left | right | center | justify
示例
<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>
p {
font-size: 1.4em;
text-align: justify;
-moz-text-align-last: center;
text-align-last: center;
}
规范
| 规范 | 状态 | 备注 |
|---|---|---|
| CSS Text Module Level 3 text-align-last |
Working Draft | Initial definition |
浏览器兼容性
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 47 35 — 472 | 12 | 49 12 — 53 -moz- | No | Yes | No3 |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | 47 35 — 471 | 47 35 — 472 | Yes | 49 14 — 53 -moz- | Yes | No3 | 5.0 |
1. From version 35 until version 47 (exclusive): this feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true).
2. From version 35 until version 47 (exclusive): this feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
3. See WebKit bug 76173.