CSS如何实现文本两端对齐？

19 min read

可以使用CSS中的text-align: justify属性实现两端对齐。具体的步骤如下：

  1. 首先，将容器的宽度设置为适当的值，并添加text-align: justify属性，如下所示：
.container {
  width: 800px;
  text-align: justify;
}
  1. 然后，在容器中的每一行的末尾添加一个不可见的空格符，可以使用伪元素::after来实现。代码如下所示：
.container::after {
  content: '';
  display: inline-block;
  width: 100%;
}

这样，每一行的末尾都会添加一个宽度为100%的不可见空格符，从而实现两端对齐。

下面是一个完整的示例代码：

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis egestas neque, eu viverra massa volutpat sit amet. In bibendum, mauris at blandit egestas, sapien eros bibendum nisl, in semper diam nunc sit amet augue. Nam sodales purus magna, vel viverra nunc varius ut. Donec bibendum tristique nunc eu lobortis. Nullam venenatis, dui nec aliquam rutrum, massa erat dignissim sapien, ac bibendum sem nulla vel augue.</p>
  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed finibus odio a gravida malesuada. Praesent sit amet diam facilisis, efficitur sapien ac, malesuada quam. In id purus eleifend turpis tristique auctor. Curabitur vulputate ex vitae mi mattis, vel feugiat nunc gravida. Praesent purus elit, accumsan a leo eu, pharetra dapibus velit. Donec ut molestie metus.</p>
  <p>Integer eu consectetur ligula. Donec eleifend lectus neque, ut vestibulum lacus vestibulum a. Ut congue, ipsum a viverra vulputate, felis mi vulputate erat, nec sodales lacus quam eget erat. Integer lacinia id ipsum ac cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec viverra laoreet libero, vel rhoncus ante semper vel.</p>
</div>

.container {
  width: 800px;
  text-align: justify;
}

.container::after {
  content: '';
  display: inline-block;
  width: 100%;
}