技術標籤：css

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: '';
}