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;
}