CSStext-aligh:justify两侧对齐最后一行没有作用的解决方法_css设置text-align:justify后最后一行文字也被拉开成两端堆起了-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43509051/article/details/97786982

本文介绍在使用CSS的text-align:justify属性时遇到的最后一行无法两端对齐的问题及解决方案。通过添加伪元素:after并设置width:100%，使最后一行变为非最后一行，实现两端对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天项目里面遇到一个需求需要展示（如图），我用了ul>li的方式来写，把li弄成inline-block。写的时候给ul加了个左右的padding,加了个text-aligh:justify，然后想着这样就不用费劲调margin-left或者right了，可是没成想又踩到了一个坑：
那就是——text-aligh:justify是针对一段文本的，它对最后一行是没有效果的。因此我一开始做出来的时候最后一行总是偏一点，很难看。
在这里插入图片描述
然后google之（google真的比百度强多了），发现了一篇很有用的博客：http://chayangge.com/2016/01/18/text-align-justify最后一行有个坑/ 写的非常详细，对我非常有帮助，里面写了关键的第二点搬运如下：
解决方法：把最后一行变为非最后一行
自然想到了伪元素（还是CSS学的不够透彻，我就没想到用伪元素），并且是伪元素:after，用其放置只在文本末端充当最后一个元素，这样最后一段文本自然就能两端对齐。所以针对最后一行文本不能两端对齐问题的最好解决方案就是这样的：

.box{
  width: 400px;
  border:1px solid #999;
  text-align: justify;
}
.box:after{
  content: "";
  display:inline-block;
  width: 100%;
}

需要注意的是伪元素设置width: 100%;目的是让伪元素足够宽以至于被挤到文本最后一行。