CSS3 justify 文本两端对齐_html/css_WEB-ITnose
两端对齐方案基于 text-align:justify 及 text-align-last:justify 实现
由于大部分浏览器两端对齐的实现,都是通过调整字之间的空格大小来达成的,所以我们事先在每个单词和汉字间都插入一个空格
IE实现
div{
text-align:justify;
text-align-last:justify;
}
justify最先是作为IE私有属性实现
Firefox实现
div{
text-align:justify;
-moz-text-align-last:justify;
}
text-align-last 在Firefox12-17下仍处理实验支持阶段,需加前缀 -moz-
Chrome, Safari, Opera实现
div{
overflow:hidden;
height:19px;
text-align:justify;
}
div: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代码,然后再将派生出的新行隐藏
综合实现
div{
overflow:hidden;
height:19px;
text-align:justify;
text-align-last:justify;
}
div:after{
display:inline-block;
content:'';
overflow:hidden;
width:100%;
height:0;
}
由于所有浏览器都支持 text-align 的 justify 属性值,但不全支持 text-align-last,我们可以对非IE及IE7以上浏览器使用伪对象生成额外的内容(IE7及以下浏览器不支持伪对象,使用text-align-last处理),置于第二行并将其隐藏,这时第一行文本(即要对齐的那个单行文本)可使用text-align:justify来对齐,所以Firefox也无需使用-moz-text-align-last了,因为也使用了text-align:justify
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
下一篇: 在SQL语句中使用replace替换字符
推荐阅读
-
两端对齐_html/css_WEB-ITnose
-
漂亮的圆角文本框 CSS3实现_html/css_WEB-ITnose
-
文本如何做到垂直居中对齐_html/css_WEB-ITnose
-
文本如何做到垂直居中对齐_html/css_WEB-ITnose
-
漂亮的圆角文本框 CSS3实现_html/css_WEB-ITnose
-
css实现两端对齐~_html/css_WEB-ITnose
-
css3 中text-align:justify_html/css_WEB-ITnose
-
单选框和复选框与文本垂直对齐_html/css_WEB-ITnose
-
html文本垂直居中对齐_html/css_WEB-ITnose
-
CSS3新增文本属性详述_html/css_WEB-ITnose
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论