css3属性text-justify两端对齐

10 篇文章 0 订阅

text-align:justify可以使文本的两端都对齐,在两端对齐文本中,文本行的左右两端都放在父元素的内边界上,然后,调整单词和字母的间隔,使各行的长度恰好相等。如果内容很少被拉开的距离太长,可以使用letter-spacing收缩一下字符间的距离。

相信好多人在使用的时候会发现最后一行不管用,因为text-align:justify不对快内的最后一行文本做处理,所以当内容只有一行的时候也不会做处理。(只有一行的时候,既是第一行也是最后一行)

这个时候我们要添加一行作为最后一行

.justify:after{
    content:'';
     width:100%;
     height:0;
     margin:0;
    display:inline-block;
    overflow:hidden;
}

完整的代码如下:

说明:列表元素的首尾标签要有空隙(空格或者换行)

写成<li></li><li></li>是错误的,是没有两端对齐效果的

 <ul class="justify_list" >
        <li >0</li>
        <li >1</li>
	<li >2</li>
	<li >3</li>
	<li >4</li>
        <li >5</li>
        <li >6</li>
        <li >7</li>
        <li >8</li>
        <li >9</li>
        <li >10</li>
</ul>
.justify_list{
        text-align: justify;
        display: inline-block;
        width: 100%;
}
.justify_list li{
	display: inline-block;
	list-style: none;
}
.justify_list:after {
	width: 100%;
	height: 0;
	margin: 0;
	display: inline-block;
	overflow: hidden;
	content: '';
}

希望总结的对大家有帮助。

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值