css文字两端对齐

最新推荐文章于 2024-06-19 15:03:38 发布

莉兹Liz

最新推荐文章于 2024-06-19 15:03:38 发布

阅读量182

点赞数

分类专栏：前端样式

本文链接：https://blog.youkuaiyun.com/qq_40138556/article/details/119007594

版权

前端样式专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用CSS让文字在最多x个字符时实现两端对齐，提供了单个样式的长度控制方法，并通过实例展示了当标题长度为6个字符时的对齐效果。参考文章进一步探讨了适用于不同长度标题的两端对齐解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

规则：
文字最长x个字符，width: xem;
单个样式（长度y)：letter-spacing: （x-y)(y-1)em;margin-right: -（x-y)(y-1)em;

栗子：
最长6个字符

<div class="content">
	<label><div class="w6">开通成功短信</div>：</label>
	<span>{{ list.isMessaged }}</span>
</div>

.content {
	text-align: justify;
	width: 6em;
	.w2 {
		letter-spacing: 4em;
		margin-right: -4em;
	}
	.w3 {
		letter-spacing: 1.5em;
		margin-right: -1.5em;
	}
	.w4 {
		letter-spacing: 0.66em;
		margin-right: -0.66em;
	}
	.w5 {
		letter-spacing: 0.25em;
		margin-right: -0.25em;
	}
	.w6 {
		letter-spacing: 0em;
		margin-right: 0em;
	}
}