html如何讓段落文本兩端對齊

這篇文章主要介紹html如何讓段落文本兩端對齊，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

html有什么特點

1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發者使用。 2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。  3、平臺無關性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網盛行的一個原因。 4、通用性：HTML是網絡的通用語言，它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

方法：1、使用“text-align:justify”語句設文本兩端對齊；2、使用flex布局的justify-content屬性設文本兩端對齊，語法“justify-content:space-around|space-between”。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS實現兩端對齊效果

兩端對齊，從概念上來說，其實不難理解。如果不明白什么叫兩端對齊，可以玩玩word等辦公軟件。

下面談談如何實現文本的兩端對齊。我所知道的大概有以下幾種方法

text-align

text-align用于設置塊級元素內文本的水平對齊方式。如果想使inline元素或inline-block元素居中對齊，可以使用text-align: center方法，對于block元素無法使用text-align實現居中對齊。如果想讓block元素居中對齊，可以使用margin: auto方法。

text-align屬性下有一個justify值可以設置元素的兩端對齊。但是text-align: justify屬性有一些不足之處：

1. 在單行文本下，無法實現兩端對齊效果。

2. 在多行文本下，無法實現最后一行文本的兩端對齊效果。

單行文本

<p class="keith">unclekeith wanna be a geek!</p>
.keith {
    background-color: lightblue;
    
}

對于多行文本而言，如下圖，按照我們的理解應該如右圖顯示，可是在設置text-align: justify之后，會按照左圖顯示。無法是西安最后一行文本的兩端對齊效果。

解決方法

如果要真正的實現兩端對齊效果，可以用以下方法解決。

//解決方法的思路：由于在單行文本下和多行文本下最后一樣無法實現兩端對齊效果，因此給元素新增一行，即可實現justify的兩個不足之處。
.keith {
    text-align: justify;
}
.keith:after {
    display: inline-block;
    width: 100%;
    content: '';
}

如果感覺最后多了空行，可以為元素設置一個高度，并且設置overflow: hidden隱藏掉即可。

justify-content

CSS3新增的flex布局下，有一個justify-content屬性，此屬性可以控制伸縮項目的水平對齊方式。其中有兩個值，可以實現兩端對齊。但是justify-content存在兼容性問題，IE10以上，FF，Chrome都支持。而所有瀏覽器都支持text-align屬性

justify-content: space-around; //伸縮項目會平均地分布在伸縮容器內，兩端保留一半的空間。
justify-content: space-between; //伸縮項目會平均地分布在伸縮容器內，第一個伸縮項目在伸縮容器的左邊緣，最后一個伸縮項目在伸縮容器的右邊緣。

justify-content: space-around;

justify-content: space-between

以上是“html如何讓段落文本兩端對齊”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！