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-alignjustify
  • 查看 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+

示例:

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号:画漫画的程序员,每天早上8点30分准时推送:前端前沿资讯、大厂面试题、程序员轶事、职场感悟等,一起进步!

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界