在开发有关表单组件的时候我们经常会碰到这样的需求:表单的label有的是3个字有的是2个字,这种情况下,还需要文字在label区域内两端对齐,如下设计图红圈里的label。

label
label

记得以前项目经验不多的时候,没有想那么多,就用了空格来强行把空隔撑开:tada,在了解到CSS属性text-align: justify后,发现了一种新的解决方案。

text-align: justify:设置文本对齐方式为两端对齐,会将多行文本的词的间距拉开使得两端没有空隙,如图所示。

text-align: justify
text-align: justify

期初没有注意上面加粗文字多行,可是在这个表单的label中,文字并没有占满一行,我试着设text-align: justify,发现并没有作用:

单行文本并没有作用
单行文本并没有作用

于是机智的我灵机一动,在label里塞一个空标签使其超过一行应该会起作用吧

1
2
3
4
<div class="form-field">
<label for="name">姓名<i></i></label>
<input type="text" id="name" name="name" placeholder="请输入姓名">
</div>
1
2
3
4
5
6
7
.form-field label {
text-align: justify;
}
.form-field label i {
display: inline-block;
width: 100%; /* 或者padding-left: 100%; 作用就是使其超过一行 */
}

果然,生效啦~ 😜

text-justify
text-justify

可是有着代码洁癖的我怎么能忍受空的HTML标签放这里,难受得一批,于是,我又灵机一动:

1
2
3
4
<div class="form-field">
<label for="name">姓名<i></i></label>
<input type="text" id="name" name="name" placeholder="请输入姓名">
</div>
1
2
3
4
5
6
7
8
.form-field label {
text-align: justify;
}
.form-field label::after{
content: ' ';
display: inline-block;
width: 100%; /* 或者padding-left: 100%; 作用就是使其超过一行 */
}
test-justify
test-justify

Perfect! 😉