text-align属性下有一个justify值可以设置元素的两端对齐。但是text-align: justify
属性有一些不足之处:
在单行文本下,无法实现两端对齐效果。在多行文本下,无法实现最后一行文本的两端对齐效果。
单行文本
<div>unclekeith wanna be a geek!</div>div{background-color: lightblue;text-align: justify;}
解决方法的思路:由于在单行文本下和多行文本下最后一样无法实现两端对齐效果,因此给元素新增一行,即可实现justify的两个不足之处。
.div{ text-align: justify;} .keith:after { display: inline-block;width: 100%; content: '';}