css text-align文字兩端對齊

text-align：start | end | left | right | center | justify | match-parent | justify-all

justify：
內容兩端對齊，但對於強制打斷的行（被打斷的這一行）及最后一行（包括僅有一行文本的情況，因為它既是第一行也是最后一行）不做處理。

start：
內容對齊開始邊界。

end：
內容對齊結束邊界。

match-parent：
這個值和 inherit 表現一致，只是該值繼承的 start 或 end 關鍵字是針對父母的 <' direction '> 值並計算的，計算值可以是 left 和 right 。

justify-all：
效果等同於 justify，但還會讓最后一行也兩端對齊。

在上一節css text-align-las設置末尾文本對齊方式我們就對"text-align:justify"做了講解，但是正如上面的解釋所說，它對最后一行以及本身就是第一行就不做處理，如下。

<style>
  body,div{
    margin:0;
    padding:0;
  }
  div{
    width:300px;
    text-align:justify;
  }
</style>
<div>讓我們一起共勉，互相支持，讓我們跑得更快，跑得更好吧！哪怕路上有風雨，哪怕途中有坎坷，只要不放棄奔跑，不放棄對自我的修行，我們終究會創造屬於自己的生命奇跡！</div>

解決方法：

<style>
  body,div{
    margin:0;
    padding:0;
  }
  div{
    width:300px;
    text-align:justify;
  }
  div::after{
    content:'';
    display:inline-block;
    width:100%;
    visibility:hidden;
  }
</style>
<div>讓我們一起共勉，互相支持，讓我們跑得更快，跑得更好吧！哪怕路上有風雨，哪怕途中有坎坷，只要不放棄奔跑，不放棄對自我的修行，我們終究會創造屬於自己的生命奇跡！</div>

它說最后一行不起效果，我們讓它不是最后一行不就解決了。

還有一種方法就是用text-align-last。

<style>
  body,div{
    margin:0;
    padding:0;
  }
  div{
    width:300px;
    text-align:justify;
    text-align-last:justify;
  }
</style>

另外justify-all也可以但Chrome不支持...還有其他幾個屬性，很好理解就不再講解了。