诺禾-诺禾科技-CSS之文本两端对齐

说起text-align，大家一定都不觉得生疏，我们常用关键字left、right、center完成行内元素相对父元素左、右、居中对齐，当然我们也运用justify来完成文本两端对齐。

如上图，两端对齐相关于左对齐，视觉上显得划一有序。但justify对最后一行无效，通常这样的排版对整段文字是极好的，我们并不希望当最后一行只要两个字时也两端对齐，毕竟这是不便于阅读的，那么当我们只要一行文本，但要完成单行文本两端对齐怎样处理（如下图的表单项效果）？

依据justify对最后一行无效，我们能够新增一行，使该行文本不是最后一行，完成如下：

//html

{{item.label}}： {{item.value}}

//scss .item { height: 32px; line-height: 32px; margin-bottom: 8px; .label { display: inline-block; height: 100%; width: 100px; text-align: justify; vertical-align: top; &::after { display: inline-block; width: 100%; content: ''; height: 0; } } .value { padding-right: 10px; } } but以上写法能够说是比拟费事的，重点来啦，最近新理解到的一个属性text-align-last，该属性定义的是一段文本中最后一行在被强迫换行之前的对齐规则。

//scss
.item {
margin-bottom: 8px;
.label {
display: inline-block;
height: 100%;
min-width: 100px;
text-align: justify;
text-align-last: justify;
}
.value {
padding-right: 10px;
}
}