欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

text-algin:justify實現(xiàn)文本兩端對齊方法小結(jié)

  發(fā)布時間：2016-10-18 17:25:46   作者：佚名   我要評論
最近在寫頁面的時候遇到了一個問題—當行文本雙端對齊，大家都知道CSS屬性中有一個“text-align:justify”，但是這個屬性使用的時候，要求還是挺多的，尤其是要實現(xiàn)單行文本雙端對齊。這篇文章就給大家分享了text-algin:justify實現(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 屬性設(shè)置為 “justify” 時才起作用。所以，利用這個屬性就可以控制最后一行文本的對齊方式。我們可以想象，如果是單行文本，就可以當作最后一行文本處理，直接設(shè)置text-align-last:justify來實現(xiàn)當行文本兩端對齊，可惜的是，這樣的方法兼容性并不好。

利用CSS實現(xiàn)兼容性較好的兩端對齊

從上面的分析可以知道，如果文本出現(xiàn)換行，則除最后一行的所有文本都會實現(xiàn)兩端對齊。這時我們想到利用::after偽類，給元素最后設(shè)置一個看不見的內(nèi)聯(lián)元素，并設(shè)置寬度為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;
}

運行結(jié)果：

總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望這篇文章能對大家學習或者使用text-algin:justify能有所幫助，如果有疑問大家可以留言交流。

相關(guān)文章

最新評論