css 两端对齐

当我们做筛选框的时候，有的时候会需要筛选文字两端对齐的情况，如图

文本的对齐方式大都是通过设置text-align来实现，text-align属性下有一个justify值可以设置元素的两端对齐。但是text-align: justify属性有一些不足之处：

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

解决方法：一、由于在单行文本下和多行文本下最后一样无法实现两端对齐效果，因此给元素新增一行，即可实现justify的两个不足之处。
二、仅单行文本时：text-align-last:justify;
代码如下

<!-- dom -->
<div class="wapper">
   <div class="dv">呵呵</div>
   <div class="dv">嘻嘻嘻</div>
   <div class="dv">啦啦啦啦</div>
</div>

.wapper{
  background-color: #eee;
}
.dv {
  width: 65px;
  text-align:justify;
  // text-align-last:justify;  //仅单行文本时
}
.dv:after {
  display: inline-block;
  width: 100%;
  content: '';
}