css文本兩端對(duì)齊

在做表單時(shí)我們經(jīng)常遇到讓上下兩個(gè)字段對(duì)齊的情況，比如姓名，手機(jī)號(hào)碼，出生地。這樣我們就要用到 text-align， text-justify樣式了。

為瑯琊等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及瑯琊網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、瑯琊網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

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;/*chrome 20+*/
      }
      @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
          .test1:after{
              content:".";
              display: inline-block;
              width:100%;
              overflow:hidden;
              height:0;
          }
      }
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）

運(yùn)行代碼：


    <!DOCTYPE HTML>
    <html>
        <head>
            <title>文本兩端對(duì)齊 </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>
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）

名稱欄目：css文本兩端對(duì)齊
標(biāo)題鏈接：http://muchs.cn/article32/johdpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、軟件開(kāi)發(fā)、網(wǎng)站改版、網(wǎng)站營(yíng)銷(xiāo)、域名注冊(cè)、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容