CSS:text-align-last文本最后一行的对齐方式

发布时间 2023-03-24 14:33:12作者: 时光独醒

在开发过程中多行文本时出现了其他行左对齐,最后一行右对齐的情况

text-align:规定行内内容如何相对它的块父元素对齐。而且它并不控制块元素自己的对齐,只控制它的行内内容的对齐。要控制文本两端对齐直接写text-align:justify就可以 了,但是对于多行文本,除了最后一行之外都可以实现两端对齐,最后一行依旧左对齐,这是因为text-align不会对文本的最后一行起作用,因此对于单行文本的段落不会实现效果,单行文本既是第一行,也是最后一行。

text-align-last:这个属性规定如何对齐文本的最后一行,但是这只有在text-align为justify的时候才起作用,直接设置text-align-last:justify就可以控制最后一行文本的对齐方式,但是这个方法兼容性相当的差,不建议使用。

1、CSS 属性 text-align-last

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;

2、属性值

auto:每一行的对齐规则由 text-align 的值来确定,当 text-align 的值是 justify,text-align-last 的表现和设置了 start 的表现是一样的,即如果文本的展示方向是从左到右,则最后一行左侧对齐与内容盒子。

start:与 direction 的设置有关。 如果文本展示方向是从左到右,起点在左侧,则是左对齐; 如果文本展示方向是从右到左,起点在右侧,则是右对齐。 如果没有设置 direction ,则按照浏览器文本的默认显示方向来确定。

end:与 direction 的设置有关。 如果文本展示方向是从左到右,末尾在右侧,则是右对齐; 如果文本展示方向是从右到左,末尾在左侧,则是左对齐。 如果没有设置 direction ,则按照浏览器文本的默认显示方向来确定。

left:最后一行文字与内容盒子的左侧对齐

right:最后一行文字与内容盒子的右侧对齐

center:最后一行文字与内容盒子居中对齐

justify:最后一行文字的开头与内容盒子的左侧对齐,末尾与右侧对齐。

要解决这种问题,可以人工生成两行文本,然后把第二行隐藏,就可以实现两端对齐了