左右對齊Justify遇到的坑

遇到的問題

這兩天在開發一個病歷的對外展現頁面，設計稿上label是左右拉伸對齊的，顯示效果以下：

怎麼實現這種效果呢？

首先想到的是文字中間加空格，可是這種方式太low了，並且不太容易控制。網上查資料，發現用justify能夠實現。

.item-field {
    display: inline-block;
    width: 80px;
    text-align: justify;
}
.....
<div>
    <label class="item-field">主訴：</label>
</div>

可是加上上述樣式後，文字依然沒有左右對齊。

justify爲何沒有生效呢？

查詢MDN上關於text-align的介紹，發現text-align有如下規則：

1. text-align只對塊級元素或者table-cell有效果
2. text-align並不控制塊元素本身的對齊，只控制它的行內內容的對齊
3. justify ：文字向兩側對齊，對最後一行無效

因爲label標籤的內容"主訴"只有一行，因此justify沒有生效

解決方式

給label標籤添加僞元素，僞元素獨佔一行且是最後一行，這樣label的內容就能夠左右對齊

.item-field {
    display: inline-block;
    width: 80px;
    text-align: justify;
    line-height: 0;
}

.item-field::after {
    content: '';
    height: 0;
    width: 100%;
    display: inline-block;
    line-height:
}

註釋：
::after用來建立一個僞元素，做爲==已選中元素的最後一個子元素==。一般會配合content屬性來爲該元素添加裝飾內容。這個虛擬元素默認是行內元素。

小結

text-align: justify能夠設置元素內容左右對齊，可是對最後一行不生效。若是內容只有一行，可經過僞元素添加一個空行，實現內容左右對齊的效果。

參考

• MDN：text-align
• MDN：僞元素::after

首發地址：http://www.geeee.top/2019/11/20/justify/， 轉載請註明出處！