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

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

  發(fā)布時(shí)間：2016-10-18 17:25:46   作者：佚名   我要評(píng)論
最近在寫頁(yè)面的時(shí)候遇到了一個(gè)問題—當(dāng)行文本雙端對(duì)齊，大家都知道CSS屬性中有一個(gè)“text-align:justify”，但是這個(gè)屬性使用的時(shí)候，要求還是挺多的，尤其是要實(shí)現(xiàn)單行文本雙端對(duì)齊。這篇文章就給大家分享了text-algin:justify實(shí)現(xiàn)文本兩端對(duì)齊的方法。

text-align:justify與text-align-last:justify

1.text-align

MDN中這樣介紹到：“text-align CSS屬性定義行內(nèi)內(nèi)容（例如文字）如何相對(duì)它的塊父元素對(duì)齊。text-align并不控制塊元素自己的對(duì)齊，只控制它的行內(nèi)內(nèi)容的對(duì)齊。”從這里可以看出，控制文本居中對(duì)齊直接寫text-align:justify就可以。但是這對(duì)于多行文本（即有文本換行）除了最后一行都可以實(shí)現(xiàn)兩端對(duì)齊，最后一行依舊左對(duì)齊。所以就需要控制最后一行文本對(duì)齊方式的CSS屬性：text-align-last。

2.text-align-last

text-align-last 屬性規(guī)定如何對(duì)齊文本的最后一行。但是這里注意一點(diǎn)text-align-last 屬性只有在 text-align 屬性設(shè)置為 “justify” 時(shí)才起作用。所以，利用這個(gè)屬性就可以控制最后一行文本的對(duì)齊方式。我們可以想象，如果是單行文本，就可以當(dāng)作最后一行文本處理，直接設(shè)置text-align-last:justify來實(shí)現(xiàn)當(dāng)行文本兩端對(duì)齊，可惜的是，這樣的方法兼容性并不好。

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

從上面的分析可以知道，如果文本出現(xiàn)換行，則除最后一行的所有文本都會(huì)實(shí)現(xiàn)兩端對(duì)齊。這時(shí)我們想到利用::after偽類，給元素最后設(shè)置一個(gè)看不見的內(nèi)聯(lián)元素，并設(shè)置寬度為100%，就可以讓我們可以看到的單行文本讓瀏覽器認(rèn)為是多行文本，從而實(shí)現(xiàn)單行文本的兩端對(duì)齊。具體實(shí)現(xiàn)代碼如下：


復(fù)制代碼
代碼如下:

<!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>


復(fù)制代碼
代碼如下:

.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;
}

運(yùn)行結(jié)果：

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

相關(guān)文章

最新評(píng)論