日常使用中我们可以用 text-align: justify;实现文本两端对齐效果。
但是该属性有一个问题,不支持单行文本的两端对齐,只有达到2行或者以上才会有效。
所以需要采用下面两种方法实现单行文本两端对齐效果:
利用伪类 :after实现:给元素添加伪类 :after 设置成行内块元素,宽度设置为100%。div:after{
content:"";
display:inline-block;
width:100%;
}
在元素标签内加一个空标签: 或者等都可以。设置为行内块,padding-left 或者宽度 width 设置为 100%。我这里用的是,比如 ,直接只给个宽度100%就可以。pi{
display:inline-block;
/*padding-left:100%;*/
width:100%;
}
还有一个问题是IE不支持,需要再加一个属性:text-justify:inter-ideograph; (用表意文本来排齐内容)
注:text-justify只支持IE浏览器,有以下几个属性:
auto 浏览器决定齐行算法。
none 禁用齐行。
inter-word 增加/减少单词间的间隔。
inter-ideograph 用表意文本来排齐内容。
inter-cluster 只对不包含内部单词间隔的内容(比如亚洲语系)进行排齐。
distribute 类似报纸版面,除了在东亚语系中最后一行是不齐行的。
kashida 通过拉伸字符来排齐内容。
代码如下:
HTML:
我是谁?
我不知道
CSS:div,p{
text-align:justify;/*两端对齐*/
border:1pxsolidred;
text-justify:inter-ideograph;/*IE支持*/
}
div:after{
content:"";
display:inline-block;
width:100%;
}
pi{
display:inline-block;
/*padding-left:100%;*/
width:100%;
}
不过,谷歌内核和IE内核还是有所区别的。如下图:
细心的人会发现,下面会多出一行空白,如果我们确定就是单行文本,可以通过固定元素的高度来实现去掉空白。div,p{
height:36px;
line-height:36px;
}
这样就可以了: