小技巧|CSS如何實現文字兩端對齊

需求以下，紅框所在的文字有四個字的、三個字的、兩個字的，若是不兩端對齊能夠選擇居中對齊，或者右對齊。可是若是要像下面這樣兩端對齊呢？

我相信之前不少人都這麼幹過：兩個字中間使用 來隔開達到四個字的寬度，三個字也能夠，可是，像上圖中「122帳號」「122密碼」這樣的，就很差計算該用幾個空格了。

假如咱們有以下HTML：

<div>這世間惟有夢想和好姑娘不可辜負！</div>

給它加點樣式

div{
  width:500px;
  border:1px solid red;
  text-align: justify;
}

初始效果是這樣的

text-align: justify這是什麼東西？CSS2中text-align有一個屬性值爲justify，爲對齊之意。其實現的效果就是能夠讓一行文字兩端對齊顯示（文字內容要超過一行）。

可是光使用它依然沒什麼卵用…..

要使文字兩端對齊，咱們還得使用一個行內空標籤來助陣，好比<span>、<i>等等，這裏是我用<i>標籤

<div>這世間惟有夢想和好姑娘不可辜負！<i></i></div>

給這個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%;
}

感謝 @依韻_宵音 的提醒