用CSS实现文字两端对齐完美解决方案

axl234

浏览: 262817 次
性别:
来自: 北京

最近访客更多访客>>

ShaLongBus

398466028

54931104

qq22903594

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

本来方法很简单

 
1
text-align:justify 

2
text-justify:inter-ideograph

但是通过测试,这个方法所有浏览器都没有效果，然后我查阅了很多资料，最后得出的结果是只有IE支持CSS中英文两端对齐比较完美，其他的浏览器用css代码能解决两端对齐的方法比较麻烦！

是的，尽管IE常为我们所不齿，但是在文字排版和国际化方面，IE是做的最好的。仅就两端分布对齐这个特例而言，IE领先了其他浏览器10年以上。

下面是用CSS让ie支持两端对齐的代码：

1
div{  text-justify:distribute-all-lines;/*ie6-8*/ 

2

      text-align-last:justify;/* ie9*/ 

3

      text-align:justify; 

4

      width:300px; 

5

6

  }

如上代码亲测，只有ie能看到两端对齐的效果！

text-align最早是作为IE的私有实现，像text-overflow， overflow-x等，在FF很晚才实现，换言之有严格的兼容性问题。并且FF，chrome需要手动在汉字间插入空白或软换行标签才生效，在chrome遇到的阻力就更大了。

注：FF，chrome需要手动在汉字间插入空白或软换行标签才能实现CSS两端对齐效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS-text-align:justify两端对齐完美解决方案</title>
    <style type="text/css">
div{
text-align:justify;
      text-justify:distribute-all-lines;/*ie6-8*/
      text-align-last:justify;/* ie9*/
      -moz-text-align-last:justify;/*ff*/
      -webkit-text-align-last:justify;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
      div:after{
          content:".";
          display: inline-block;
          width:100%;
          overflow:hidden;
          height:0;
      }
}
    </style>
</head>
<body>
    <div>W E B 前端攻城湿</div>
<div> W 3 C o d e K i n g</div>
</body>
</html>

分享到：

使用 JavaScript File API 实现文件上传 | 响应式网页：使用 rem 设置文字大小

2013-08-07 15:56
浏览 5165
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论