CSS 文本两端对齐，用点填充空白

在本文中，我们将介绍如何使用CSS的text-justify属性来实现文本两端对齐，并且通过填充空白处的文字使用点来更好地排版。

阅读更多：CSS 教程

了解文本对齐

在CSS中，我们可以使用text-align属性来控制文本的对齐方式。常见的对齐方式有左对齐（left）、居中对齐（center）和右对齐（right）。但是，如果我们想要实现文本两端对齐效果，就需要使用text-justify属性。

text-justify属性用于规定当文本在一行中溢出容器时的对齐方式。默认值是auto，即浏览器自动选择对齐方式。其他的取值有：none（不进行调整）、auto（自动调整）、inter-word（单词间的调整）、inter-character（字符间的调整）、distribute（两端对齐）等。

使用text-justify实现文本两端对齐

当我们想要实现文本两端对齐时，可以将text-justify属性的值设置为distribute。这样，文本会被完全拉伸，填充满整个容器。

.text-justify {
  text-align: justify;
  text-justify: distribute;
}

在上面的例子中，我们将单词间的间隔调整为相等大小，以达到文本两端对齐的效果。

然而，通过以上代码实现的两端对齐效果并不如我们期待的那样令人满意。因为在填充空白处我们希望显示点而不是拉伸字母。接下来，我们将介绍如何使用CSS伪元素来填充空白处的文本，并显示为点。

使用伪元素填充空白处的文本

要在CSS中填充空白处的文本，我们可以使用伪元素::after或::before。下面是一个例子，将伪元素::after添加到文本的末尾来填充空白处的文本。

.text-justify-dot::after {
  content: '·';
  visibility: hidden;
}

在上面的例子中，我们使用content属性来定义伪元素的内容为·。visibility属性设置为hidden，以便让点显示出来，但不占用实际空间。

接下来，我们将使用伪元素::after来填充文本两端的空白处。

.text-justify-dot {
  text-align: justify;
  text-justify: distribute;
}

.text-justify-dot::after {
  content: '·';
  visibility: hidden;
}

通过以上的代码，在文本两端的空白处我们将会显示为点。

示例说明

下面我们将使用一个示例来说明如何使用CSS的text-justify属性以及伪元素来实现文本两端对齐并填充空白处的文本为点。

<!DOCTYPE html>
<html>
<head>
<style>
.text-justify-dot {
  text-align: justify;
  text-justify: distribute;
}

.text-justify-dot:after {
  content: '·';
  visibility: hidden;
}
</style>
</head>
<body>

<p class="text-justify-dot">这是一个示例文本，用于演示text-justify和伪元素的使用。<br>这是一个示例文本，用于演示text-justify和伪元素的使用。<br>这是一个示例文本，用于演示text-justify和伪元素的使用。<br>这是一个示例文本，用于演示text-justify和伪元素的使用。</p>

</body>
</html>

在上面的示例中，我们通过添加class为text-justify-dot的样式来实现文本两端对齐并填充空白处的文本为点。通过将class应用到希望实现这种效果的文本标签上，我们可以轻松地实现这一效果。