[分享]css两端带间隔对齐

在前端开发中，经常会遇到需要将文本两端对齐的情况。而使用CSS实现两端对齐的方法有很多种，其中比较常用的方法就是通过设置带间隔的空格来实现。textalign: justify; textjustif...

在前端开发中，经常会遇到需要将文本两端对齐的情况。而使用CSS实现两端对齐的方法有很多种，其中比较常用的方法就是通过设置带间隔的空格来实现。

text-align: justify;
text-justify: distribute-all-lines; 

以上代码就是设置文本两端对齐的方法，其中text-align: justify;表示对齐方式为两端对齐，而text-justify: distribute-all-lines;则表示将文本之间的空隙均匀分布，实现文字间距相等。

不过需要注意的是，在某些浏览器中可能不支持text-justify: distribute-all-lines;，这时需要使用一些兼容性的代码进行处理。

除此之外，还可以通过使用伪元素:before和:after来实现两端对齐。使用伪元素的好处是可以控制文本之间的间隙和换行等属性，同时也不需要添加额外的HTML元素。

.text-justify:before,
.text-justify:after {
    content: "";
    display: inline-block;
    width: 50%;
}

.text-justify:before {
    margin-right: -100%;
}

.text-justify:after {
    margin-left: -100%;
} 

以上代码可以让文本两端对齐，并且通过设置:before和:after的宽度为50%来实现文本均分，使用负的外边距来控制文本之间的间隔。

总之，实现文本两端对齐的方法很多，需要根据实际情况选择最适合的方法进行实现。