這篇文章主要為大家展示了“如何使用css實現文本兩端對齊”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何使用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;/*chrome20+*/
}
@mediascreenand(-webkit-min-device-pixel-ratio:0){/*chrome*/
.test1:after{
content:".";
display:inline-block;
width:100%;
overflow:hidden;
height:0;
}
}
運行代碼：
<!DOCTYPEHTML>
<html>
<head>
<title>文本兩端對齊</title>
<metahttp-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;/*chrome20+*/
}
@mediascreenand(-webkit-min-device-pixel-ratio:0){/*chrome*/
.test1:after{
content:".";
display:inline-block;
width:100%;
overflow:hidden;
height:0;
}
}
</style>
</head>
<body>
<divclass="box1">
<divclass="test1">姓名</div>
<divclass="test1">姓名姓名</div>
<divclass="test1">姓名名</div>
<divclass="test1">所在地</div>
<divclass="test1">工作單位</div>
</div>
</body>
</html>
以上是“如何使用css實現文本兩端對齊”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
