資訊專欄INFORMATION COLUMN
摘要：需求如下，紅框所在的文字有四個字的三個字的兩個字的，如果不兩端對齊可以選擇居中對齊，或者右對齊。其實現的效果就是可以讓一行文字兩端對齊顯示文字內容要超過一行。
需求如下，紅框所在的文字有四個字的、三個字的、兩個字的，如果不兩端對齊可以選擇居中對齊，或者右對齊。但是如果要像下面這樣兩端對齊呢？
我相信以前很多人都這么干過：兩個字中間使用 來隔開達到四個字的寬度，三個字也可以，但是，像上圖中“122賬號”“122密碼”這樣的，就不好計算該用幾個空格了。
假如我們有如下HTML：
這世間唯有夢想和好姑娘不可辜負！
給它加點樣式
div{
width:500px;
border:1px solid red;
text-align: justify;
}
初始效果是這樣的
text-align: justify這是什么東西？CSS2中text-align有一個屬性值為justify，為對齊之意。其實現的效果就是可以讓一行文字兩端對齊顯示（文字內容要超過一行）。
但是光使用它依然沒什么卵用…..
要使文字兩端對齊，我們還得使用一個行內空標簽來助陣，比如、等等，這里是我用標簽
這世間唯有夢想和好姑娘不可辜負！
給這個i標簽設置如下樣式
div i{
display:inline-block;
/*padding-left: 100%;*/
width:100%;
}
padding-left: 100%和width:100%都可以達到效果，選用其一即可。效果如下
但是加入HTML元素又違反了結構表現分離的原則，我們可以改用after、before偽元素：
div:after {
content: " ";
display: inline-block;
width: 100%;
}
感謝 @依韻_宵音 的提醒
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116611.html
摘要：中當屬性被賦值為時屬性經常被用來和屬性一起設置文本兩端對齊的方式。 CSS中,當text-align屬性被賦值為justify時,text-justify屬性經常被用來和text-align屬性一起設置文本兩端對齊的方式。 p { text-align: justify; text-justify: inter-word; } Values inter-word: 表示當前文...
摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優雅，不需要寫冗長的代碼來校驗設置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細葉誰裁出，二月春風似剪刀。首先，你需要先了解一下漸變的使用技巧。 之前不久，由于自己平時涉獵還算廣泛，總結了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...
摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優雅，不需要寫冗長的代碼來校驗設置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細葉誰裁出，二月春風似剪刀。首先，你需要先了解一下漸變的使用技巧。 之前不久，由于自己平時涉獵還算廣泛，總結了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...
閱讀 1625·2021-10-14 09:43
閱讀 5503·2021-09-07 10:21
閱讀 1275·2019-08-30 15:56
閱讀 2123·2019-08-30 15:53
閱讀 1230·2019-08-30 15:44
閱讀 2010·2019-08-30 15:44
閱讀 1320·2019-08-29 17:24
閱讀 752·2019-08-29 15:19
