浏览器参照基准: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 样式,对了,还要单独设置下高度哦!
世 界 末 日 2012
把 钱 都 花 了 ?
末 日 没 来
傻 了 吧
/* Only for IE */ .justify-for-ie p{ text-align:justify; } .single-line-justify p{ text-align-last:justify; /* 此不能作为两端对齐默认属性,会对多行文本最后一行造成影响,故改为只在单行文本时使用 */ } justify最先是作为IE私有属性实现(也许是由于office吧,IE对文本的排版设置特别强悍,还有文本纵向排列属性呢,只不过其他浏览器都不支持,以至于文本纵排全兼容最好用其他方法)
世 界 末 日 2012
把 钱 都 花 了 ?
末 日 没 来
傻 了 吧
/* Only for Firefox */ .justify-for-firefox p{ text-align:justify; -moz-text-align-last:justify; } text-align-last 在Firefox12-17下仍处理实验支持阶段,需加前缀 -moz-
世 界 末 日 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方法主要解决单行文本两端对齐问题,对于多行文本无此问题,无需设置即可!
This is the effect of the English text:
Start:
W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy.
End.
Effect of a single line of text
这是中文文字的效果:
测试文字内容区开始:
cnBootstrap 项目是基于 Twitter Bootstrap 开发的前端框架,集成了 aliceui 兼容解决方案(包括但不限于aliceui)亦将我所了解的前端技巧也整合进了解决方案,现仍在完善中... 本项目在CC BY 3.0协议下开源,您可以随意使用本项目代码,更多详情请访问前端兼容解决方案。
测试文字内容区结束
标点/空格测试
cnBootstrap项目是基于Twitter Bootstrap开发的前端框架,集成了... 此处会避免标点符号居行首,所以...
单 行 文 本 效 果
注意:针对中文的单行文本两端对齐(英文单词已经有空格了),文字间必须要加空格两端对齐才有效果,不然无效!
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
实践出真知