CSS Text3: text-align-last

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

在CSS中对于text-align而言,大家并不会感到陌生,但对于text-align-last来说,知道的人我想并不会太多。那么今天我们来说一说这个属性。

有的时候,我们需要制作一个这样的效果:

text-align-last

大家知道,CSS中的对齐方式,一般都是使用text-align来控制的,但要实现上图的效果,仅使用text-align对于我们来说将是一件蛋疼的事情。只能做到下面这样的效果:

如果要实现图片一样的效果,那text-align-last将会拯救我们。

text-align-last描述

text-align-last这个属性主要用来设置一个块中的最后一行的对齐方式。

  • 一个块的最后一行
  • <br>标签断行的最后一行

text-align-last的使用

接下来,简单的看看text-align-last属性如何使用。

语法

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

text-align-last属性具备autostartendleftrightcenterjustify几个属性。此属性与text-align属性相比少了match-parentjustify-all

text-align-last其默认值是auto,而且其只能运用于块元素上,或者说块元素的断行内。对于行内元素来说是无效的。如下面的示例:

属性值介绍

要彻底了解text-align-last属性的具体使用,那么必须对其每个属性值的实际作用有所了解。

auto

如果text-align-last取值为auto值时,其效果会受text-align值所影响。比如下面的示例,我们先给figcaption元素设置了text-align:right,同时设置text-align-last值为auto。那么其效果将会根据text-align值来生效。

当然,这也有另外的情况。当text-align取值为justify时,text-align-last值为auto时并不会根据text-align:justify来渲染效果,而是始终会左边对齐

录制了一个动画效果,就中修改text-align的值时,text-align-lastauto时对应的各种效果:

text-align-last

start

如果文本排版方向是LTR,那么文本将左对齐,反之,如果文版排版方向是RTL时,文本右对齐。

如果text-align-last取值为start时,text-align取值并不会对其产生任何影响。

text-align-last

end

如果文本排版方向是LTR,那么文本右对齐;反之,如果文本排版方向是RTL,文本左对齐。

同样的text-align取值不会对text-align-last:end有影响。

left

取值为left时,最后一行文本会靠容器左边缘对齐。

right

取值为right时,最后一行文本会靠容器右边缘对齐。

center

取值为center时,最后一行文本在容器中水平居中对齐。

justify

取值为justify时,文本效果和text-justify效果一样。浏览器会根据容器的宽度和内容的多少自动调整词与词之间的间距,让最后一行文本的第一个词靠容器左边缘对齐,文本的最后一个词靠容器的右边缘对齐。

大家使用text-align:justify时就知道,由于文本的内容会造成它与容器两边边缘会有空白间距,一边解决的方法是通过元素的伪元素创建一条直线,然后再分配其空间。具体的操作可以看早期整理的一篇文章《Text-align:Justify和RWD》。

inherit

取值为inherit时,将会继承其父元素的text-align-last的取值效果。

来看个效果,咱们动态修改figure中的text-align-last的值,而figcaptiontext-align-last取值为inherit的效果:

text-align-last

有关于inherit相关的介绍可以阅读《Initial, Inherit, Unset, and Revert》一文。

注意:通过上面的示例,我们可以看到text-align-last取值为start或者end时,其效果会受排版方向direction的影响。而且取值为auto时,其效果会受除text-alignjustify之外其它值的影响。

前面演示的都是英文排版的效果,下面来看一个中文版本的效果:

下面的动态效果图,修改了text-align-last值对中文排版本的效果有何不同:

text-align-last

浏览器兼容性

上面详细介绍了text-align-last的使用,以及其不同属性值所得到的效果。那么对于一个新属性,你一定会置问,现在能用吗?其兼容性好吗?那么浏览器具体对其支持程度如何,咱不多说,直接看下面的列表:

总结

这篇文章详细介绍了文本对齐方式的另一个属性text-align-last。其主要作用就是用来设置块元素最后一行文本的对齐方式。其主要的值有autostartendleftcenterrightjustifyinherit。其实很多表现行为和text-align的取值非常的类似,其不同的是控制块元素最后一行文本对齐方式。

扩展阅读

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:http://www.w3cplus.com/css3/text-align-last.html

返回顶部