使用text-align-last对齐两端文本

2019-09-03149次阅读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;

 

属性值

  • 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:最后一行文字的开头语内容盒子的左侧对齐,末尾与右侧对齐。

浏览器兼容看这里

上一篇: 使用vw定制rem自适应布局  下一篇: 使用transform描绘1px边框  

使用text-align-last对齐两端文本相关文章