[分享]css两端对齐重点留固定间距

CSS两端对齐是一种常见的排版技巧，但有时候我们希望在文字内容之间留有一定的间距，这时候就需要用到重点留固定间距的方法。首先，我们需要使用textjustify属性来实现两端对齐，如下所示：p { t...

CSS两端对齐是一种常见的排版技巧，但有时候我们希望在文字内容之间留有一定的间距，这时候就需要用到重点留固定间距的方法。

首先，我们需要使用text-justify属性来实现两端对齐，如下所示：

p {
  text-align: justify;
  text-justify: inter-word;
} 

上述代码会让文本两端对齐，并且以单词为单位进行断行和空格填充，使文本更加美观。

然后，我们需要使用伪元素:before和:after来插入空格，从而达到留有固定间距的效果：

p:before {
  content: "200220022002";
}

p:after {
  content: "200220022002";
} 

上述代码会在每个段落的开头和结尾插入三个等宽空格，从而形成固定间距。

需要注意的是，这里使用的是等宽空格，即半角空格，而不是普通的全角空格。半角空格的宽度是普通字符的一半，因此使用三个半角空格可以达到一个普通字符的宽度。

最终的代码如下：

p {
  text-align: justify;
  text-justify: inter-word;
}

p:before {
  content: "200220022002";
}

p:after {
  content: "200220022002";
} 

使用这种方法可以让我们在排版时保持良好的视觉效果，同时也能够保证内容之间的区分度。