text-align-last

语法：

text-align-last：auto | start | end | left | right | center | justify

默认值：auto

适用于：块容器

继承性：有

动画性：否

计算值：指定值

媒　体：视觉

取值：

auto：
无特殊对齐方式。
left：
内容左对齐。
center：
内容居中对齐。
right：
内容右对齐。
justify：
内容两端对齐。
start：
内容对齐开始边界。
end：
内容对齐结束边界。

说明：

定义块内文本内容的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式

  • 对于text-align-last来讲，一个块内文本内容可能会存在多个最后一行，如下例：

    如何区别最后一行：

    <div class="demo">一个块内文本内容可能会存在多个所谓的最后一行<br />这些最后一行都是 text-align-last 的服务范围</div>
    一个块内文本内容可能会存在多个所谓的最后一行
    这些最后一行都是 text-align-last 的服务范围
    .demo { width: 200px; background: #eee; }

    如上，我们将一段文本置入宽度为 200px 的 .demo 元素中，这段文本被 br 元素强制打断了，所有我们能看到这段文本最终显示为了 4 行，此时对于 text-align-last 来讲，将有 2 个最后一行：

    • 最后一行（即例子中的第4行，真实的最后一行）
    • 第二行（因为第二行是被 br 强制打断的，所以该行也将被当成最后一行）

    这意味着第2行与第4行都无法通过 text-align: justify 来实现两端对齐，而需要使用 text-align-last

    一个块内文本内容可能会存在多个所谓的最后一行
    这些最后一行都是 text-align-last 的服务范围
    .demo { text-align: justify; /* 作用于1，3两行 */ text-align-last: justify; /* 作用于2，4两行 */ }
  • 作为IE的私有属性之一，IE5.5率先实现了text-align-last，后期被w3c采纳成标准属性；
  • IE7及以下浏览器只实现了块内最后一行的对齐方式，没有处理被强制打断的行的对齐方式，从IE8开始，这两种形式的行对齐都被支持；
  • IE浏览器下，如果text-align-last要生效，必须先定义text-align为justify；
  • 查看 form表单标签名两端对齐效果demo
  • 对应的脚本特性为：textAlignLast。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0-48.0 -moz- 40.0-46.0 8.0-11.0 40.0+ 8.0-11.3 4.4-46.0 28.0-46.0
49.0+ 47.0+ 47.0+ 47.0+
start | end 8.0-11.0 40.0-48.0 -moz- 40.0-46.0 8.0-11.0 40.0+ 8.0-11.3 4.4-46.0 28.0-46.0
12.0+ 49.0+ 47.0+ 47.0+ 47.0+

示例：