CSS文字两端对齐

在CSS中实现文字两端对齐，可以使用text-align: justify;属性。这一属性会让段落中的每一行文字都填充至左右边界，从而达到两端对齐的效果。

基本方法

我们可以通过简单的CSS属性设置来实现文字两端对齐。下面是一个基础示例：

html
</p>



    
    
    <title>CSS文字两端对齐</title>
    
        .justify-text {
            text-align: justify;
            width: 300px;
            border: 1px solid #ccc;
            padding: 10px;
        }
    


    <div class="justify-text">
        这是一个用于演示文字两端对齐的段落。通过设置text-align: justify;可以让文字在左右两端对齐。
    </div>



<p>

在这个例子中，.justify-text类设置了text-align: justify;，使得段落中的文字能够两端对齐。

解决最后一行不对齐的问题

有时候我们会发现，使用text-align: justify;后，最后一行的文字并没有真正实现两端对齐。这是因为浏览器默认不会对最后一行进行两端对齐处理。为了解决这个问题，我们可以引入伪元素。

css
.justify-text::after {
content: '';
display: inline-block;
width: 100%;
}


这段代码通过在段落后添加一个占据整行宽度的伪元素，强制让最后一行也进行两端对齐。

Flexbox布局实现两端对齐

除了传统的text-align: justify;，我们还可以利用Flexbox布局来实现类似的效果。这种方法特别适用于需要对块级元素进行分布的情况。

html</p>

<div class="flex-container">
    <div>项目一</div>
    <div>项目二</div>
    <div>项目三</div>
</div>

<p>

css
.flex-container {
display: flex;
justify-content: space-between;
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}


在这个例子中，.flex-container类使用了display: flex;和justify-content: space-between;，这会让容器内的子元素均匀分布，从而实现一种类似文字两端对齐的效果。

以上就是几种实现CSS文字两端对齐的方法，开发者可以根据具体需求选择合适的方式。