web前台技术学习总结-CSS实现全浏览器兼容的ellipsis

核心提示：参加项目已经有一段时间了,笔者在web标准设计方面的学习有了不少进步.之前学习和实践都是边Google边看书进行的,只输入没输出,也很少和大家进行交流.项目已经接近尾声,有必要进行总结,把自己学到的悟到的在博客园与大家分享交流,同时温故知新,希望在此过程中学到更多的东西.于是,就有了本系列文章. 最开始来一个比较容易说

参加项目已经有一段时间了,笔者在web标准设计方面的学习有了不少进步.之前学习和实践都是边Google边看书进行的,只输入没输出,也很少和大家进行交流.项目已经接近尾声,有必要进行总结,把自己学到的悟到的在博客园与大家分享交流,同时温故知新,希望在此过程中学到更多的东西.于是,就有了本系列文章.

最开始来一个比较容易说的清楚的吧.

截取固定长度字符有很多实现方法:一是让后台直接截好后写到前台,二是当DOM加载完后用JS截取,第三就是用CSS来进行.第一个方法对于前台来说不用做什么操作,但是会对服务器造成多余的负担;第二个方法看似很好,既可以跨浏览器,有不用担心增加服务器的负担,但是按照progressive enhancement的设计原则,是不可取的,而且JS一般是在DOM加载完成后载入的,这样,整个渲染过程会暴露的用户面前,体验是比较糟糕的.

基于以上的考虑,我采用了第三种方法,但就不得不考虑跨浏览器的问题. 很奇怪的是,在文字截取这方面,firefox要落后于其他浏览器,它竟然不支持text-overflow:ellipsis! Google了一下,居然有国外牛人另辟蹊径,用firefox本身特有的XUL标记语言对此进行hack,比较完美的解决了这个问题. 我对此进行了总结和转化,写成了一个全浏览器兼容的CSS类,具体操作如下:

把以下XML文件(用的是XUL标记)保存为ellipsis.xml放相关CSS同目录下:

<?xml　version="1.0"?>
　　<bindings
　　xmlns="http://www.mozilla.org/xbl"
　　xmlns:xbl="http://www.mozilla.org/xbl"
　　xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
　　>
　　　　<binding　id="ellipsis">
　　　　　　<content>
　　　　　　　　<xul:window>
　　　　　　　　　　<xul:description　crop="end"　xbl:inherits="value=xbl:text">
　　　　　　　　　　　　<children/>
　　　　　　　　　　</xul:description>
　　　　　　　　</xul:window>
　　　　　　</content>
　　　　</binding>
　　</bindings>

下面就是我用的CSS类:

.ellipsis　{
　　white-space:　nowrap;
　　overflow:　hidden;
　　text-overflow:　ellipsis;/*针对IE和webkit核心(Google　Chrome,Safari)*/
　　-o-text-overflow:　ellipsis;　/*针对Opera　*/
　　-moz-binding:　url('ellipsis.xml#ellipsis');/*针对　Firefox　进行XUL的绑定*/
}

用法.使用这个类的元素必须是block或inline-block级别,拥有width属性.

比如

<a　class="sample　ellipsis"　href="/group/miantan">XXXX</a>　

其中sample类为

.sample{
　　display:block;
　　width:14em;
}

这样使用,可以解决大多数的问题,但这中方法并不是完美无缺的,它也有自己的不足,那就是只能截取一行的文字,如果要截取多行的文字,我就只能采用js的方法了.

编缉推荐阅读以下文章

• web前台技术学习总结(3)-轻便型全站javascript部署
• web前台技术学习总结(2)-用jQuery自定义的请求JSON方法