css：text-align：justify的用法

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

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

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

方法一、添加一个内敛块状元素，并设置宽度为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;
}

 

转载于:https://www.cnblogs.com/runhua/p/7106060.html