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

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

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

注意： 在安卓手机中仅使用 text-align-last:justify;就可以控制文字在页面元素中左右对齐，但是在ios手机中不生效，需要使用text-align:justify;，使用时需要在里面加一个空标签 span，然后在设置以上css属性即可兼容ios手机中也生效。

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

 方法一、添加一个内敛块状元素，并设置宽度为100%，那么这个时候内联匿名盒的宽度超过行盒，浏览器会将其拆成两行，自然第一行文本的text-align效果就生效了

<p class="center">我是两端对齐文字端对齐文字<span>span>p>
.center{
  text-align:justify;
}
span{
  display:inline-block;
  width:100%;
}

方法二、利用after伪元素在后面添加一个空的内容，并把width设为100%，将内容撑大，然后hidden它

.public{
width:80px;
height:100%;
display:inline-block;
text-align: justify;
vertical-align:top;
background-color: #aaa;
}
.public::after{
content:"";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}