[分享]css两端对齐怎么设置

CSS两端对齐是一种常见的排版技术，它将一行文本的开头和结尾对齐到指定的容器边缘。这种技术可以让文本看起来更整齐美观，下面介绍几种实现方式： 首先是textalign: justify;属性。这个属性...

CSS两端对齐是一种常见的排版技术，它将一行文本的开头和结尾对齐到指定的容器边缘。这种技术可以让文本看起来更整齐美观，下面介绍几种实现方式：
首先是text-align: justify;属性。这个属性将文本分布在整个容器中，通过添加额外的间隔来对齐文本。但是，这种方式有一个缺陷，就是最后一行的间隔不会自动调整，因此需要使用::after伪元素来解决。

p {
   text-align: justify;
   text-justify: inter-word; /* 可选 */
}
p::after {
   content: "";
   display: inline-block;
   width: 100%;
   height: 0;
} 

另一种方式是使用flex布局。这种技术可以轻松地实现两端对齐，只需要将容器的display属性设置为flex，并使用justify-content和align-items属性设置容器中的文本对齐方式。

.container {
   display: flex;
   justify-content: space-between;
   align-items: center;
} 

最后一种方式是使用text-align-last属性，这个属性可以使文本最后一行对齐。同样也需要使用::after伪元素来弥补每行之间的间隔。

p {
   text-align: justify;
   -webkit-text-align-last: justify;
   text-align-last: justify;
}
p::after {
   content: "";
   display: inline-block;
   width: 100%;
   height: 0;
} 

总的来说，CSS两端对齐技术有多种实现方式，可以根据具体的需求来选择使用哪种方式。但是需要注意的是，在使用这些技术时，需要考虑最后一行与容器边缘之间的间隔问题，通过添加伪元素解决。