标签：两端 text align 对齐 文本 css justify

css 两端对齐

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

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

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

解决方法的思路：由于在单行文本下和多行文本下最后一样无法实现两端对齐效果，因此给元素新增一行，即可实现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: '';
}

标签：两端,text,align,对齐,文本,css,justify
来源： https://blog.csdn.net/weixin_42965334/article/details/111713269

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。