左右對齊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屬性來為該元素添加裝飾內容。這個虛擬元素默認是行內元素。

為什么不使用justify-all

text-align還有一個可選值justify-all, 根據MDN上的定義：justify-all同justify一樣，區別是最后一行也會兩端對齊。 為什么不使用justify-all呢？因為justify-all是一個體驗性的API，各個主流瀏覽器都不支持 ，瀏覽器支持度

小結

text-align: justify可以設置元素內容左右對齊，但是對最后一行不生效。如果內容只有一行，可通過偽元素添加一個空行，實現內容左右對齊的效果。

參考

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

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