經常我們會遇到類似上圖的表單填寫,前面的title有時候會需要居中、兩端對齊或者右對齊。特別是兩端對齊的情況,我最常用的方法是在文字之間加 這個空格符。
text-align-last 屬性
屬性規定如何對齊文本的最後一行。
注意:text-align-last 屬性只有在 text-align 屬性設置爲 "justify" 時才起作用。有兼容性問題,請根據情況選擇使用。
常見文本對齊示例:
.box{
margin: 200px;
overflow: hidden;
}
.box .item{
margin-bottom: 8px;
line-height: 32px;
height: 32px;
}
.box .item .label{
display: inline-block;
min-width: 80px;
height: 100%;
margin-right: 5px;
text-align: justify; /*必寫*/
text-align-last: justify;/*這裏可以寫 left、right、center、justify、auto...*/
}
<div class="box">
<div class="item">
<span class="label">手機號碼</span>:
<span class="value">185********</span>
</div>
<div class="item">
<span class="label">密碼</span>:
<span class="value">******</span>
</div>
<div class="item">
<span class="label">郵箱地址</span>:
<span class="value">pi***@aliyun.com</span>
</div>
</div>
想了解更多,參見https://www.runoob.com/cssref/css3-pr-text-align-last.html