Web 文本两端对齐

浏览器参照基准:IE5.5+, Firefox4+, Chrome5+, Safari5+, Opera10.53+

两端对齐方案基于 text-align:justify 及 text-align-last:justify 实现

综合兼容实现

世 界 末 日 2012

把 钱 都 花 了 ?

末 日 没 来

傻 了 吧

/* justify for All */
.text-justify p{
    text-align:justify;
    text-align-last:justify;
}
.single-line-justify p{
    height:24px;
}
.single-line-justify p:after{
    display:inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height:0;
}

注意:这里使用了:after属性,p标签自适应高度时出现底部多一空白行高度,针对此问题,对飘零雾雨的方法进行下变更会应用更方便,对单行文本和多行文本进行区分处理,如下:
默认支持多行文本两端对齐,需添加 .text-justify 样式;
支持单行文本两端对齐,需再添加 .single-line-justify 样式,对了,还要单独设置下高度哦!

Only IE

世 界 末 日 2012

把 钱 都 花 了 ?

末 日 没 来

傻 了 吧

/* Only for IE */
.justify-for-ie p{
    text-align:justify;
}
.single-line-justify p{
    text-align-last:justify;
    /* 此不能作为两端对齐默认属性,会对多行文本最后一行造成影响,故改为只在单行文本时使用 */
}
justify最先是作为IE私有属性实现(也许是由于office吧,IE对文本的排版设置特别强悍,还有文本纵向排列属性呢,只不过其他浏览器都不支持,以至于文本纵排全兼容最好用其他方法)

Only Firefox

世 界 末 日 2012

把 钱 都 花 了 ?

末 日 没 来

傻 了 吧

/* Only for Firefox */
.justify-for-firefox p{
    text-align:justify;
    -moz-text-align-last:justify;
}

text-align-last 在Firefox12-17下仍处理实验支持阶段,需加前缀 -moz-

Chrome, Safari, Opera下的两端对齐

世 界 末 日 2012

把 钱 都 花 了 ?

末 日 没 来

傻 了 吧

/* Chrome, Safari, Opera下的两端对齐 */
.justify-for-webkit-presto p{
    text-align:justify;
}
.single-line-justify p{
    height:24px;
}
.single-line-justify p:after{
    display:inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height:0;
}

Chrome23, Safari5.1.7, Opera12.11 不支持 text-align-last, 但支持 text-align 的 jsutify,所以这里可以变通实现单行文本两端对齐对齐,我们知道text-align:justify 不处理块内的最后一行文本(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)及被强制打断的行的两端对齐,但会处理除此之外的其它行,所以只需要将这里的单行变成多行即可,那么我们可以使用伪对象的方式派生出新行,这样不需要额外处理html代码,然后再将派生出的新行隐藏

这里飘零雾雨的:after方法主要解决单行文本两端对齐问题,对于多行文本无此问题,无需设置即可!

中英文 多行|单行文本两端对齐效果

注意:针对中文的单行文本两端对齐(英文单词已经有空格了),文字间必须要加空格两端对齐才有效果,不然无效!
text-justify:inter-ideograph;属性时IE hack,在IE下不管中英文、不管是不是最后一行、不管中文间有没有加空格都将全变为文本两端对齐的效果,不推荐使用。

由于字体在各个浏览器下还是有些微差异的,所以文本两端对齐的应用在各浏览器下效果并不一致,请重视空格/标点符号的影响,需适当手工调整。

其他常见场景

表单
由于所有浏览器都支持 text-align 的 justify 属性值,但不全支持 text-align-last,我们可以对非IE及IE7以上浏览器使用伪对象生成额外的内容(IE7及以下浏览器不支持伪对象,使用text-align-last处理),置于第二行并将其隐藏,这时第一行文本(即要对齐的那个单行文本)可使用text-align:justify来对齐,所以Firefox也无需使用-moz-text-align-last了,因为也使用了text-align:justify

问题及注意事项:

实践出真知