方法：1、使用“text-align:”語句設(shè)文本兩端對齊；2、使用flex布局的-屬性設(shè)文本兩端對齊，語法“-:space-|space-”。
本教程操作環(huán)境：系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
CSS實(shí)現(xiàn)兩端對齊效果
兩端對齊，從概念上來說，其實(shí)不難理解。如果不明白什么叫兩端對齊，可以玩玩word等辦公軟件。
下面談?wù)勅绾螌?shí)現(xiàn)文本的兩端對齊。我所知道的大概有以下幾種方法
text-align
text-align用于設(shè)置塊級元素內(nèi)文本的水平對齊方式。如果想使元素或-block元素居中對齊，可以使用text-align: 方法，對于block元素?zé)o法使用text-align實(shí)現(xiàn)居中對齊。如果想讓block元素居中對齊，可以使用: auto方法。
text-align屬性下有一個值可以設(shè)置元素的兩端對齊。但是text-align: 屬性有一些不足之處：
在單行文本下，無法實(shí)現(xiàn)兩端對齊效果。
在多行文本下，無法實(shí)現(xiàn)最后一行文本的兩端對齊效果。
單行文本
unclekeith wanna be a geek!
.keith {background-color: lightblue; }
對于多行文本而言，如下圖，按照我們的理解應(yīng)該如右圖顯示，可是在設(shè)置text-align: 之后，會按照左圖顯示。無法是西安最后一行文本的兩端對齊效果。
解決方法
如果要真正的實(shí)現(xiàn)兩端對齊效果word里兩端對齊后格式不對了，可以用以下方法解決。
//解決方法的思路：由于在單行文本下和多行文本下最后一樣無法實(shí)現(xiàn)兩端對齊效果，因此給元素新增一行，即可實(shí)現(xiàn)justify的兩個不足之處。
.keith {
text-align: justify;
}
.keith:after {
display: inline-block;
width: 100%;
content: '';
}
如果感覺最后多了空行，可以為元素設(shè)置一個高度，并且設(shè)置: 隱藏掉即可。
-
CSS3新增的flex布局下，有一個-屬性，此屬性可以控制伸縮項(xiàng)目的水平對齊方式。其中有兩個值word里兩端對齊后格式不對了，可以實(shí)現(xiàn)兩端對齊。但是-存在兼容性問題，IE10以上，F(xiàn)F，都支持。而所有瀏覽器都支持text-align屬性
justify-content: space-around; //伸縮項(xiàng)目會平均地分布在伸縮容器內(nèi)，兩端保留一半的空間。 justify-content: space-between; //伸縮項(xiàng)目會平均地分布在伸縮容器內(nèi)，第一個伸縮項(xiàng)目在伸縮容器的左邊緣，最后一個伸縮項(xiàng)目在伸縮容器的右邊緣。
-: space-;
-: space-
推薦學(xué)習(xí)：html視頻教程
以上就是html怎么讓段落文本兩端對齊的詳細(xì)內(nèi)容，更多請關(guān)注其它相關(guān)文章！