您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“web開發(fā)中text-algin:justifyrh如何實現(xiàn)文本兩端對齊”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“web開發(fā)中text-algin:justifyrh如何實現(xiàn)文本兩端對齊”這篇文章吧。
text-align:justify與text-align-last:justify
1.text-align
MDN中這樣介紹到:“text-align CSS屬性定義行內(nèi)內(nèi)容(例如文字)如何相對它的塊父元素對齊。text-align并不控制塊元素自己的對齊,只控制它的行內(nèi)內(nèi)容的對齊?!睆倪@里可以看出,控制文本居中對齊直接寫text-align:justify就可以。但是這對于多行文本(即有文本換行)除了最后一行都可以實現(xiàn)兩端對齊,最后一行依舊左對齊。所以就需要控制最后一行文本對齊方式的CSS屬性:text-align-last。
2.text-align-last
text-align-last 屬性規(guī)定如何對齊文本的最后一行。但是這里注意一點text-align-last 屬性只有在 text-align 屬性設置為 “justify” 時才起作用。所以,利用這個屬性就可以控制最后一行文本的對齊方式。我們可以想象,如果是單行文本,就可以當作最后一行文本處理,直接設置text-align-last:justify來實現(xiàn)當行文本兩端對齊,可惜的是,這樣的方法兼容性并不好。
利用CSS實現(xiàn)兼容性較好的兩端對齊
從上面的分析可以知道,如果文本出現(xiàn)換行,則除最后一行的所有文本都會實現(xiàn)兩端對齊。這時我們想到利用::after偽類,給元素最后設置一個看不見的內(nèi)聯(lián)元素,并設置寬度為100%,就可以讓我們可以看到的單行文本讓瀏覽器認為是多行文本,從而實現(xiàn)單行文本的兩端對齊。具體實現(xiàn)代碼如下:
<!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開發(fā)中text-algin:justifyrh如何實現(xiàn)文本兩端對齊”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。