css单行两端对齐

text-align属性下有一个justify值可以设置元素的两端对齐。但是text-align: justify属性有一些不足之处：

在单行文本下，无法实现两端对齐效果。
在多行文本下，无法实现最后一行文本的两端对齐效果。

解决单行两端对齐

.aaa {
    text-align: justify;
}
.aaa:after {
    display: inline-block;
    width: 100%;
    content: '';
}

解决原因：

通过伪元素：after 添加一行 从而可以实现；

不足之处：

设置行高时，设置的是两行，会撑开盒子；

解决方法：

.aaa {
    text-align: justify;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
}
.aaa:after {
    display: inline-block;
    width: 100%;
    content: '';
}

解决原因：设置高度 溢出隐藏；