在CSS中,你可以使用text-align: justify;
属性来实现文本的两端对齐。这通常用于段落文本,使文本行在左右两侧都对齐,形成整齐的文本块。
以下是一个简单的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两端对齐示例</title>
<style>.justify-text {text-align: justify;}
</style>
</head>
<body><p class="justify-text">这是一个两端对齐的示例文本。你可以看到这段文本的左右两侧都是对齐的,形成了整齐的文本块。这种效果在排版中很常见,特别是在印刷品和正式的文档中。
</p></body>
</html>
在上面的示例中,我们为<p>
元素添加了一个名为justify-text
的类,并在CSS中为该类设置了text-align: justify;
属性。这将使该段落的文本实现两端对齐。
请注意,当文本行较短或只有一行时,两端对齐的效果可能不明显。为了获得最佳效果,请确保文本有足够的长度以形成多行文本块。