css文字兩端對齊
在做表單時我們經常遇到讓上下兩個欄位對齊的情況,比如姓名, 手機號碼, 出生地。這樣我們就要用到 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>
方案:
.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>
這裡推薦一下我的前端學習交流群:731771211,裡面都是學習前端的,如果你想製作酷炫的網頁,想學習程式設計。自己整理了一份2018最全面前端學習資料,從最基礎的HTML+CSS+JS【炫酷特效,遊戲,外掛封裝,設計模式】到移動端HTML5的專案實戰的學習資料都有整理,送給每一位前端小夥伴,有想學習web前端的,或是轉行,或是大學生,還有工作中想提升自己能力的,正在學習的小夥伴歡迎加入學習。
點選:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2287214/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 【小技巧】CSS文字兩端對齊CSS
- css 表單標籤兩端對齊CSS
- 用css怎麼實現兩端對齊?CSS
- 探索發現:CSS實現中文兩端對齊CSS
- 【CSS】段落文字實現兩端對齊,不滿一行則不需要CSS
- CSS文字水平居中對齊CSS
- text-align:justify 兩端對齊
- CSS文字框與驗證碼垂直對齊CSS
- linux對齊文字Linux
- 用css實現兩端對齊text-align: justify有什麼不足之處?CSS
- canvas textAlign 文字對齊Canvas
- form表單元素名稱兩端對齊代ORM
- css居中對齊大全CSS
- CAD表格文字對齊方式
- css使用transform垂直對齊CSSORM
- CSS居中對齊終極指南CSS
- 如何讓文字居右對齊,換行後又居左對齊
- CSS Tips——未知寬度高度居中對齊CSS
- leetcode 68. 文字左右對齊 模擬LeetCode
- 中文詞語字數不同時兩端(等寬)對齊的方法小結
- idea設定 執行 按鈕在右上角,設定toolbar兩端對齊Idea
- CSS設定一個文字兩種顏色CSS
- WPS/Word中公式與文字不對齊的問題公式
- css除去flex類的幾種對齊方式的思考CSSFlex
- css使文字顯示兩行後顯示省略號CSS
- 好程式設計師前端教程css對齊方案總結程式設計師前端CSS
- vxe-table 設定單元格對齊方式,左對齊、右對齊
- RadioButton文字按鈕間距設定,按鈕在文字右端顯示,RadioButton 右端對齊
- css兩端固定大小,中間自動大小CSS
- CSS——CSS 給文字加樣式:② 文字屬性CSS
- CSS 文字居中CSS
- 同步研發、雙端齊至 暴雪兩款“暗黑”新作亮相嘉年華
- CSS-文字格式CSS
- css文字編輯CSS
- CSS文字裝飾CSS
- CSS 小結筆記之解決flex佈局邊框對不齊CSS筆記Flex
- golang 位元組對齊Golang
- 記憶體對齊記憶體