text-align-last

版本: CSS3

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;

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
safari浏览器不支持,其余浏览器都支持 text-align-last

语法:

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

取值:

  • auto:无特殊对齐方式。 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 的设置有关。
  • left:内容左对齐。 left 最后一行文字与内容盒子的左侧对齐
  • center:内容居中对齐。 center 最后一行文字与内容盒子居中对齐
  • right:内容右对齐。 right 最后一行文字与内容盒子的右侧对齐
  • justify:内容两端对齐。 justify 最后一行文字的开头与内容盒子的左侧对齐,末尾与右侧对齐。
  • start:内容对齐开始边界。 start direction 的设置有关。
    如果文本展示方向是从左到右,起点在左侧,则是左对齐;
    如果文本展示方向是从右到左,起点在右侧,则是右对齐。
    如果没有设置 direction ,则按照浏览器文本的默认显示方向来确定。
  • end:内容对齐结束边界。 end direction 的设置有关。
    如果文本展示方向是从左到右,末尾在右侧,则是右对齐;
    如果文本展示方向是从右到左,末尾在左侧,则是左对齐。
    如果没有设置 direction ,则按照浏览器文本的默认显示方向来确定。

说明:

  • 如果某一行同时也是块内的第一行或者第一行但后面紧跟着强制换行,除非显示的指定 text-align 第一行对齐方式(值 start end ),否则 text-align-last 将会覆盖 text-align
  • 如果 auto 值被指定,内容的对齐方式将依据 text-align 的设定,除非 text-align 设置为 justify
  • 作为IE的私有属性之一,IE5.5率先实现了 text-align-last ,后期被w3c采纳成标准属性;
  • IE7及以下浏览器只实现了块内最后一行的对齐方式,没有处理被强制打断的行的对齐方式,从IE8开始,这两种形式的行对齐都被支持;
  • IE浏览器下,如果 text-align-last 要生效,必须先定义 text-align:justify
  • 对应的脚本特性为 textAlignLast
默认值 auto
适用于 块容器
继承性
动画性
计算值 指定值

例子

p{
text-align:justify;
text-align-last:right;
-moz-text-align-last:right;}/*针对firefox的代码*/
}
<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
p {
  font-size: 1.4em;
  text-align: justify;
  -moz-text-align-last: center;
  text-align-last: center;
}

上篇: text-align

下篇: text-justify