【css】css实现文字两端对齐效果：

作者：System 时间：2024年08月08日分类：所有,css 字数：523

CSS中实现文字两端对齐的效果，可以使用text-align: justify;属性。这会使得文本的左右两端都紧贴容器的边缘，并且文本之间的间隔被拉伸以达到这个效果。

下面是一个简单的例子：

HTML:




<div class="justified-text">
    这是一段需要实现两端对齐效果的文本。文本的左右两端将会紧贴容器的边缘，并且文本之间的间隔会被拉伸以保持这种对齐。
</div>

CSS:




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

注意，单行文本默认不会两端对齐，因为它没有足够的空间进行拉伸。为了使最后一行文本也实现两端对齐效果，可以使用伪元素的方法：




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

这段代码会在.justified-text的最后添加一个空的伪元素，使得最后一行也能够被拉伸到容器的两端。