遇到的問題
這兩天在開發一個病歷的對外展示頁面，設計稿上label是左右拉伸對齊的，顯示效果如下：
怎么實作這種效果呢？
首先想到的是文字中間加空格，但是這種方式太low了，而且不太容易控制，網上查資料，發現用justify可以實作，
.item-field {
display: inline-block;
width: 80px;
text-align: justify;
}
.....
<div>
<label >主訴：</label>
</div>
但是加上上述樣式后，文字依然沒有左右對齊，
justify為什么沒有生效呢？
查詢MDN上關于text-align的介紹，發現text-align有以下規則：
- text-align只對塊級元素或者table-cell有效果
- text-align并不控制塊元素自己的對齊，只控制它的行內內容的對齊
- 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/， 轉載請注明出處！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/100490.html
標籤：Html/Css
上一篇：[Vscode插件] 自動編譯專案中的Sass檔案為CSS
下一篇：css樣式重置 移動端適配