CSS3实现文字两端对齐或文字在容器中平均分布

A_STUDY程序媛

已于 2022-07-07 21:01:14 修改

阅读量4.9k

点赞数 2

分类专栏： H5C3夯实基础文章标签： css3 前端 css

于 2022-07-07 20:59:19 首次发布

本文链接：https://blog.csdn.net/BUG_CONQUEROR_LI/article/details/125666861

版权

H5C3夯实基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何在CSS中实现文字均匀分布的效果，包括多行文本的text-align:justify、单行文本的text-align-last:justify以及通过伪元素和占位标签的方法。同时，提到了各种方法的优缺点和兼容性问题，特别是对不同浏览器的支持情况。

摘要由CSDN通过智能技术生成

做项目时遇到需要在固定宽度实现文字均匀分布的效果,记录一下相关方法:

① 多行文本时: text-align: justify

但是需要注意: text-align不处理强制打断的行, 也不处理块内的最后一行。通俗的讲, 只有一行显示的时候这个属性是不起作用的;(或者使用了 word-break: break-all这种强制换行的属性, 也是不起作用的)

// HTML部分
<!-- 多行文字左右两端对齐 -->
<div id='content'>
	<div class='i'>空空空空</div>
	<div class='i'>空空空空空</div>
	<div class='i'>空空空</div>
</div>

// CSS部分
#content{
	width: 200px;
	margin: 100px auto;
	padding: 10px;
	background-color: #ace;
}
#content .i{
	width:100%;
	height:25px;
	line-height:25px;
	font-size: 20px;
	font-weight: bold;
	text-align: justify;
}

②只有一行文本时: text-align-last: justify

( 或者写的全一点: text-align: justify; text-justify: distribute-all-lines; text-align-last: justify; )

ie可以这样写: text-align: justify; text-justify: inter-ideograph;

缺点: 兼容性不好, 谷歌运行可以, 火狐、IE和safari浏览器没有效果且ios系统也不兼容。

// HTML部分
<!-- 多行文字左右两端对齐 -->
<div id='content'>
	<div class='i'>空空空空</div>
	<div class='i'>空空空空空</div>
	<div class='i'>空空空</div>
</div>

// CSS部分
#content{
	width: 200px;
	margin: 100px auto;
	padding: 10px;
	background-color: #ace;
}
#content .i{
	width:100%;
	height:25px;
	line-height:25px;
	font-size: 20px;
	font-weight: bold;
	text-align-last: justify;
}

③在内容后面添加一个用于占位的标签, 让内容处于第一行。

可以实现文字对齐效果, 也可以加兼容ios系统, 占位符可以是p标签也可以是i标签。当行间距过大时, 可以设置height和line-height来解决。

缺点: 增加了占位标签

// HTML部分
<!-- 多行文字左右两端对齐 -->
<div id='content'>
	<div class='i'>空空空空<p></p></div>
	<div class='i'>空空空空空<p></p></div>
	<div class='i'>空空空<p></p></div>
</div>

// CSS部分
#content{
	width: 200px;
	margin: 100px auto;
	padding: 10px;
	background-color: #ace;
}
#content .i{
	width: 100%;
	height: 25px;
	line-height: 25px;
	font-size: 20px;
	font-weight: bold;
	text-align: justify;
}
.i p{
	display: inline-block;
	width:100%;
}

④ 通过伪类after的方式

优势:少了占位标签

缺点: ie7及以下不支持伪类, 不能用该方法

// HTML部分
<ul>
	<li>空空空空</li>
	<li>空空空空空</li>
	<li>空空空</li>
</ul>
// CSS部分
ul li{
	width: 120px;
	height: 40px;
	line-height: 40px;
	text-align: justify;
}
ul li:after{
	content:'',
	display:inline-block;
	width:100%; // 或者padding-left:100%;
}

文章略长, 根据自己需要选择性使用叭~

——————————————————————
参考文章：https://blog.csdn.net/QiuRenBB/article/details/119903959