css设置文字在固定宽度中等距分开（仅限于单行文本）

小跳不会Coding

于 2024-05-22 14:24:02 发布

阅读量268

点赞数 7

分类专栏： CSS样式文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_48596030/article/details/139119179

版权

CSS样式专栏收录该内容

18 篇文章 1 订阅

订阅专栏

一、要实现的效果：

在这里插入图片描述

二、代码

要在CSS中设置文本在一个固定宽度的容器中等距分开，
可以使用text-align: justify;属性，它可以让文本两端对齐，看起来就像是等距分开的。
但是要注意，单独使用text-align:justify;只能对单行文本进行处理，多行文本需要额外的设置。

<div class="lef_tit">标题：</div>
<div class="lef_tit">封面图片：</div>


<style>
	.lef_tit {
		width: 88px;
		/* 设置文本两端对齐 */
		text-align: justify;
		/* 为了等距分开，设置词间距调整方式 */
		text-justify: inter-word;
	}

	.lef_tit:after {
		content: '';
		display: inline-block;
		width: 100%;
		/* 设置伪元素宽度为100%，使得最后一行左对齐 */
	}
</style>