css 文本左右對齊

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在做表單時我們經常遇到讓上下兩個欄位對齊的情況，比如姓名，手機號碼，出生地。這樣我們就要用到 text-align， text-justify樣式了。

text-align直接設為justify就行了，text-justify的情況就複雜了，可能有人對它還不熟悉。IE的取值如下：

auto :允許瀏覽器使用者代理程式確定使用的左右對齊法則
inter-word :通過增加字之間的空格對齊文本。該行為是對齊所有文本行最快的方法。它的左右對齊行為對段落的最後一行無效
newspaper : 通過增加或減少字或字母之間的空格對齊文本。是用於拉丁文字母表左右對齊的最精確格式
distribute :處理空格很像newspaper，適用於東亞文檔。尤其是泰國
distribute-all-lines :左右對齊行的方式與distribute相同，也同樣不包含兩段對齊段落的最後一行。適用於表意字文檔
inter-ideograph : 為表意字文本提供完全左右對齊。他增加或減少表意字和詞間的空格

但它最早是作為IE的私人實現，像text-overflow， overflow-x等，在FF很晚才實現，換言之有嚴格的相容性問題。並且FF，chrome需要手動在漢字間插入空白或軟換列標籤才生效，在chrome遇到的阻力就更大了。p>

這兩天一直在QQ群與朋友們在聊這問題，最後由一絲給出究極方案：

          .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;                }            }

</p><p><!DOCTYPE HTML><br /><html><br /> <head><br /> <title>文本左右對齊 by 司徒正美</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></p><p> <style></p><p> .box1{<br /> background:red;<br /> width:30%;<br /> }<br /> .test1 {<br /> text-align:justify;<br /> text-justify:distribute-all-lines;/*ie6-8*/<br /> text-align-last:justify;/* ie9*/<br /> -moz-text-align-last:justify;/*ff*/<br /> -webkit-text-align-last:justify;/*chrome 20+*/<br /> }<br /> @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/<br /> .test1:after{<br /> content:".";<br /> display: inline-block;<br /> width:100%;<br /> overflow:hidden;<br /> height:0;<br /> }<br /> }<br /> </style></p><p> </head><br /> <body><br /> <div class="box1"><br /> <div class="test1">姓名</div><br /> <div class="test1">姓名姓名</div><br /> <div class="test1">姓名名</div><br /> <div class="test1">所在地</div><br /> <div class="test1">工作單位</div><br /> </div></p><p> </body><br /></html><br />

運行代碼

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More