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

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

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

① 多行文本时: 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%;
}

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

——————————————————————
参考文章：