text-align: justify 无法两端对齐解决办法

最新推荐文章于 2024-10-26 18:16:45 发布

原创最新推荐文章于 2024-10-26 18:16:45 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

13 篇文章

订阅专栏

本文探讨了在CSS中实现文本两端对齐的两种有效方法。通过使用伪元素和inline-block属性，可以确保文本在不同宽度的容器中都能均匀分布，即使在文本长度不足以填充整行时也能保持美观。

网上查找问题：
text-align: justify; 一行文本不进行处理,还有强制换行的也不处理，只有强制占满了一行才处理两端对齐。
emmmmmmmmmm---------------------
解决办法一：

<p class ="test01">测试两端对齐</p>

<style>
.test01{
text-align: justify;
background: red;
}
.test01:after{
  content:"";
  display:inline-block;
  width:100%;
}
</style>

解决方法二：

<p class="test02">测试两端对齐<span></span></p>
<style>
.test02{
     text-align:justify;
     background: red;
     overflow: hidden;
}
.test02 span{
    display:inline-block;
    width:100%;
}
</style>