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

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