溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css怎么實(shí)現(xiàn)文本兩端對(duì)齊，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
在做表單時(shí)我們經(jīng)常遇到讓上下兩個(gè)字段對(duì)齊的情況，比如姓名，手機(jī)號(hào)碼，出生地。這樣我們就要用到text-align，text-justify樣式了。
text-align直接設(shè)為justify就行了，text-justify的情況就復(fù)雜了，可能有人對(duì)它還不熟悉。IE的取值如下：
auto:允許瀏覽器用戶代理確定使用的兩端對(duì)齊法則
inter-word:通過增加字之間的空格對(duì)齊文本。該行為是對(duì)齊所有文本行最快的方法。它的兩端對(duì)齊行為對(duì)段落的最后一行無(wú)效
newspaper:通過增加或減少字或字母之間的空格對(duì)齊文本。是用于拉丁文字母表兩端對(duì)齊的最精確格式
distribute:處理空格很像newspaper
distribute-all-lines:兩端對(duì)齊行的方式與distribute相同，也同樣不包含兩段對(duì)齊段落的最后一行。適用于表意字文檔
inter-ideograph:為表意字文本提供完全兩端對(duì)齊。他增加或減少表意字和詞間的空格
但它最早是作為IE的私有實(shí)現(xiàn)，像text-overflow，overflow-x等，在FF很晚才實(shí)現(xiàn)，換言之有嚴(yán)格的兼容性問題。并且FF，chrome需要手動(dòng)在漢字間插入空白或軟換行標(biāo)簽才生效，在chrome遇到的阻力就更大了。p>
方案：
.test1{
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/*ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome20+*/
}
@mediascreenand(-webkit-min-device-pixel-ratio:0){/*chrome*/
.test1:after{
content:".";
display:inline-block;
width:100%;
overflow:hidden;
height:0;
}
}
運(yùn)行代碼：
<!DOCTYPEHTML>
<html>
<head>
<title>文本兩端對(duì)齊</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<style>
.box1{
background:red;
width:30%;
}
.test1{
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/*ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome20+*/
}
@mediascreenand(-webkit-min-device-pixel-ratio:0){/*chrome*/
.test1:after{
content:".";
display:inline-block;
width:100%;
overflow:hidden;
height:0;
}
}
</style>
</head>
<body>
<divclass="box1">
<divclass="test1">姓名</div>
<divclass="test1">姓名姓名</div>
<divclass="test1">姓名名</div>
<divclass="test1">所在地</div>
<divclass="test1">工作單位</div>
</div>
</body>
</html>
以上是“css怎么實(shí)現(xiàn)文本兩端對(duì)齊”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
