因为text-align不会处理被打断的行和最后一行。
解决方法是使用text-align-last,并将其设置为justify。
不过不幸的是,text-align-last不是所有浏览器支持。

所以对于不支持text-align-last的,可以在最后一行人工生成两行文本,然后把第二行隐藏了,那么我们要现实的第一行自然就可以实现两端对齐了。

或者设置span为inline-block,宽度(100%),那么这个时候内联匿名盒的宽度超过行盒,浏览器会将其拆成两行,自然第一行文本的text-align效果就生效了。

 

<p class="center">我是两端对齐文字端对齐文字<span></span></p>

.center{
  text-align:justify;
}

span{
  display:inline-block;
  width:100%;
}

 

相关文章:

  • 2021-07-27
  • 2021-09-29
  • 2021-12-15
  • 2021-09-29
  • 2021-12-02
  • 2021-08-15
  • 2021-12-15
  • 2021-11-06
猜你喜欢
  • 2021-11-21
  • 2021-08-07
  • 2021-07-15
  • 2021-07-24
  • 2021-11-18
  • 2021-12-26
  • 2021-12-12
  • 2021-11-01
相关资源
相似解决方案