当前第2页 返回上一页
根据justify对最后一行无效,我们可以新增一行,使该行文本不是最后一行,实现如下:
1 2 | <span class = "label" >{{item.label}}</span>: <span class = "value" >{{item.value}}</span></div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .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,该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .item {
margin-bottom: 8px;
.label {
display: inline-block;
height: 100%;
min-width: 100px;
text-align: justify;
text-align-last: justify;
}
.value {
padding-right: 10px;
}
}
|
相比第一种实现,第二种实现方式就简单了不少,不过该属性有兼容性问题,大家可以根据情况决定实现方式。
( 推荐学习:CSS教程 )
以上就是css实现文本两端对齐的方法的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
css li怎么水平居中对齐
声明css有哪几种方式
css li的点怎么去掉
css如何剪切元素??clip属性的使用
css如何改变图片的颜色
css3 flexbox该怎么使用?
css需要什么环境
css样式表常驻留在文档的什么区域中
css如何去除inline-block元素间的间距?(多种方法)
css中的content属性该如何使用
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css实现文本两端对齐的方法