在开发过程中多行文本时出现了其他行左对齐,最后一行右对齐的情况
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:最后一行文字的开头与内容盒子的左侧对齐,末尾与右侧对齐。
要解决这种问题,可以人工生成两行文本,然后把第二行隐藏,就可以实现两端对齐了
标签:last,text,align,一行,对齐,文本 From: https://www.cnblogs.com/czhowe/p/17251465.html