我們在Word文檔中操作時，知道文本的對齊方式有4種，分別是左端對齊、居中對齊、右端對齊、兩邊對齊，具體效果如下所示
那麼，前端如何通過CSS實現兩邊對齊呢？通過CSS2文檔查詢text-align可知有個justify屬性能夠實現文本兩端對齊
但是當自己在CSS樣式文件中加入 text-align: justify; 這句話時卻無法實現兩端對齊的效果，這是爲什麼？
這是因爲兩端對齊需要一個條件，那就是在滿行的情況下才能實現對齊。接下來我們看下面的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兩端對齊</title>
<style type="text/css">
div{
width:300px;
padding: 5px;
text-align: justify;
border: 1px solid rgba(0,0,0,0.1);
}div:after {
width: 100%;
content: " ";
display: inline-block;
}
</style>
</head>
<body>
<div>CSS實現文本內容兩端對齊！</div>
</table>-->
</body>
</html>
效果如下圖所示
CSS中給div的添加了僞類，寬度填滿父類容器。這樣做的目的就是將一行撐爆，使該行溢出，這樣製造出多行效果時justify屬性生效，從而實現了兩端對齊效果，但是這樣會導致空白區域的出現。想要解決這種問題，可以添加一個父容器，固定寬度將超出的部分隱藏掉。
大概是爲了解決這種尷尬的現象，CSS3推出了“text-align-last ”屬性，它規定了文本的最後一行的對齊方式。
只需要在容器中加入 text-align-last: justify 這句話就可實現文本兩端對齊，這是因爲當只有一行文本內容時，它也是最後一樣。實際代碼如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兩端對齊</title>
<style type="text/css">
div{
width:300px;
padding: 5px;
text-align-last: justify;
border: 1px solid rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div>CSS實現文本內容兩端對齊！</div>
</body>
</html>
效果如下所示
