溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“web開發中text-algin:justifyrh如何實現文本兩端對齊”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“web開發中text-algin:justifyrh如何實現文本兩端對齊”這篇文章吧。
text-align:justify與text-align-last:justify
1.text-align
MDN中這樣介紹到：“text-align CSS屬性定義行內內容（例如文字）如何相對它的塊父元素對齊。text-align并不控制塊元素自己的對齊，只控制它的行內內容的對齊。”從這里可以看出，控制文本居中對齊直接寫text-align:justify就可以。但是這對于多行文本（即有文本換行）除了最后一行都可以實現兩端對齊，最后一行依舊左對齊。所以就需要控制最后一行文本對齊方式的CSS屬性：text-align-last。
2.text-align-last
text-align-last 屬性規定如何對齊文本的最后一行。但是這里注意一點text-align-last 屬性只有在 text-align 屬性設置為 “justify” 時才起作用。所以，利用這個屬性就可以控制最后一行文本的對齊方式。我們可以想象，如果是單行文本，就可以當作最后一行文本處理，直接設置text-align-last:justify來實現當行文本兩端對齊，可惜的是，這樣的方法兼容性并不好。
利用CSS實現兼容性較好的兩端對齊
從上面的分析可以知道，如果文本出現換行，則除最后一行的所有文本都會實現兩端對齊。這時我們想到利用::after偽類，給元素最后設置一個看不見的內聯元素，并設置寬度為100%，就可以讓我們可以看到的單行文本讓瀏覽器認為是多行文本，從而實現單行文本的兩端對齊。具體實現代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="line"> <div class="public">啊啊</div> <b>:</b> <b>aaaaaa</b> </div> <div class="line"> <div class="public">啊啊啊啊啊</div> <b>:</b> <b>aaaaaa</b> </div> <div class="line"> <div class="public">啊啊啊啊</div> <b>:</b> <b>aaaaaa</b> </div> </body> </html>
.line{
width:100%;
height:15px;
margin:5px;
background-color: #ccc;
}
.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;
}運行結果：
以上是“web開發中text-algin:justifyrh如何實現文本兩端對齊”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
