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

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)代碼如下:
<!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;
}
運(yùn)行結(jié)果:
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望這篇文章能對(duì)大家學(xué)習(xí)或者使用text-algin:justify能有所幫助,如果有疑問大家可以留言交流。
相關(guān)文章
css 文本兩端對(duì)齊應(yīng)用實(shí)例
在做表單時(shí)我們經(jīng)常遇到讓上下兩個(gè)字段對(duì)齊的情況,比如姓名, 手機(jī)號(hào)碼, 出生地,一般情況下我們都會(huì)使用text-align、text-justify樣式來應(yīng)付,下面有個(gè)不錯(cuò)的示例大家可2013-09-27css實(shí)現(xiàn)文本和div居中對(duì)齊詳細(xì)講解示例
這篇文章主要介紹了css實(shí)現(xiàn)文本和div居中對(duì)齊詳細(xì)講解示例,需要的朋友可以參考下2014-05-05CSS如何對(duì)齊文本框和其旁邊的圖像按鈕比如搜索框等等
一個(gè)文本框旁邊一個(gè)按鈕是很經(jīng)常用到的網(wǎng)頁(yè)內(nèi)容,比如搜索框等等,如何使用css對(duì)齊文本框和旁邊的圖像按鈕,下面有個(gè)比較不錯(cuò)的解決方案,感興趣的朋友可以參考下2014-04-15input文本框和img驗(yàn)證碼對(duì)齊問題(img總比input高出一個(gè)頭)
在制作網(wǎng)頁(yè)過程中經(jīng)常會(huì)將input 和 img 放在同一行實(shí)現(xiàn)左側(cè)輸入右側(cè)驗(yàn)證碼,不過與此同時(shí)出現(xiàn)的一個(gè)問題是文本框和驗(yàn)證碼的水平對(duì)齊問題,下面與大家分享下具體的解決方法2013-06-24css中圖片于文本的基線對(duì)齊與vertical-align屬性設(shè)置
默認(rèn)的情況是圖片頂對(duì)齊而文字底對(duì)齊,通過設(shè)置css屬性可以使得圖片與文字對(duì)齊,接下來為大家詳細(xì)介紹下設(shè)置各對(duì)象的vertical-align屬性,感興趣的朋友可以參考下哈2013-04-02- 網(wǎng)頁(yè)中form表單的元素會(huì)出現(xiàn)一些問題:比如文本域和按鈕對(duì)齊問題,這個(gè)問題會(huì)影響到界面的美觀度,本文將介紹如何解決此類問題,需要了解的朋友可以參考下2012-11-30
用CSS實(shí)現(xiàn)文本左右對(duì)齊且首行縮進(jìn)的代碼
關(guān)于這個(gè)小問題呢,我也想到了<<精通CSS與HTML設(shè)計(jì)模式>>這本書的第11章介紹的分割這一節(jié)的文章有介紹,但這本書我也沒有放在公司,也就不管它了;今天翻起這本書也正好看2010-04-05CSS3的column-fill屬性對(duì)齊列內(nèi)容高度的用法詳解
column-fill屬性會(huì)將不同高度的指定列以高度差最小化的方式進(jìn)行對(duì)齊,這里我們就來看一下CSS3的column-fill屬性對(duì)齊列內(nèi)容高度的用法詳解:2016-07-01CSS3中的注音對(duì)齊屬性ruby-align用法指南
這篇文章主要介紹了CSS3中的注音對(duì)齊屬性ruby-align用法指南,ruby-align支持多種語言注音的上下對(duì)齊,包括日語中的漢字和平假名的注音形式對(duì)齊,需要的朋友可以參考下2016-07-01