這篇文章將為大家詳細講解有關怎么在css中實現(xiàn)文本兩端對齊,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關知識有一定的了解。

“專業(yè)、務實、高效、創(chuàng)新、把客戶的事當成自己的事”是我們每一個人一直以來堅持追求的企業(yè)文化。 創(chuàng)新互聯(lián)建站是您可以信賴的網(wǎng)站建設服務商、專業(yè)的互聯(lián)網(wǎng)服務提供商! 專注于網(wǎng)站制作、網(wǎng)站建設、軟件開發(fā)、設計服務業(yè)務。我們始終堅持以客戶需求為導向,結合用戶體驗與視覺傳達,提供有針對性的項目解決方案,提供專業(yè)性的建議,創(chuàng)新互聯(lián)建站將不斷地超越自我,追逐市場,引領市場!
text-align直接設為justify就行了,text-justify的情況就復雜了,可能有人對它還不熟悉。IE的取值如下:
auto :允許瀏覽器用戶代理確定使用的兩端對齊法則
inter-word :通過增加字之間的空格對齊文本。該行為是對齊所有文本行最快的方法。它的兩端對齊行為對段落的最后一行無效
newspaper : 通過增加或減少字或字母之間的空格對齊文本。是用于拉丁文字母表兩端對齊的最精確格式
distribute :處理空格很像newspaper
distribute-all-lines:兩端對齊行的方式與distribute相同,也同樣不包含兩段對齊段落的最后一行。適用于表意字文檔
inter-ideograph : 為表意字文本提供完全兩端對齊。他增加或減少表意字和詞間的空格
但它最早是作為IE的私有實現(xiàn),像text-overflow, overflow-x等,在FF很晚才實現(xiàn),換言之有嚴格的兼容性問題。并且FF,chrome需要手動在漢字間插入空白或軟換行標簽才生效,在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;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
.test1:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
}運行代碼:
<!DOCTYPE HTML>
<html>
<head>
<title>文本兩端對齊 </title>
<meta http-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;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
.test1:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="test1">姓 名</div>
<div class="test1">姓 名 姓 名</div>
<div class="test1">姓 名 名</div>
<div class="test1">所 在 地</div>
<div class="test1">工 作 單 位</div>
</div>
</body>
</html>1.行內(nèi)樣式,最直接最簡單的一種,直接對HTML標簽使用style=""。2.內(nèi)嵌樣式,就是將CSS代碼寫在之間,并且用
進行聲明。3.外部樣式,其中鏈接樣式是使用頻率最高,最實用的樣式,只需要在之間加上
就可以了。其次就是導入樣式,導入樣式和鏈接樣式比較相似,采用@import樣式導入CSS樣式表,不建議使用。關于怎么在css中實現(xiàn)文本兩端對齊就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
分享題目:怎么在css中實現(xiàn)文本兩端對齊
文章網(wǎng)址:http://chinadenli.net/article18/geihgp.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈、、網(wǎng)站導航、全網(wǎng)營銷推廣
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)