小編給大家分享一下css怎么實(shí)現(xiàn)文本兩端對(duì)齊，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元復(fù)興做網(wǎng)站,已為上家服務(wù),為復(fù)興各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

在做表單時(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:通過(guò)增加字之間的空格對(duì)齊文本。該行為是對(duì)齊所有文本行最快的方法。它的兩端對(duì)齊行為對(duì)段落的最后一行無(wú)效

newspaper:通過(guò)增加或減少字或字母之間的空格對(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)格的兼容性問(wè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)行代碼：

姓名