text-overflow兼容主流浏览器,css限制单行字符长度方法

一直以来我都以为css是无法限制字符长度的,最近才发现原来可以这样.最简单的兼容方法:

.textOverflow {
width:100px;
white-space:nowrap;/*限制单行输出*/
text-overflow:ellipsis;/*只支持IE6(+)*/
overflow: hidden;
-o-text-overflow: ellipsis;/*Opera专用*/
-moz-binding: url('ov.xml#ellipsis');/*firefox下实现要配套对应的xml文件*/
}
/*.xul是为<xul:description>添加的class属性*/
.xul{
color:#fff;
}

html代码:

<div class="textOverflow">块级元素块级元素块级元素块级元素块级元素块级元素</div>

根目录下ov.xml文件代码:

<?xml version="1.0" encoding="utf-8"?>
<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:description class="xul" crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
    </content>
  </binding>
</bindings>

现在网上很多是流行js方法来兼容ff的,其实上述介绍的是用了xul:description的方法,^_^我也不知道那是啥来的,不过这样写很简洁。
关于xul的教程《XUL教程
转载请注明:作者Joe 地址:http://xiebiji.com/2008/11/textoverflow

5 Responses to text-overflow兼容主流浏览器,css限制单... »

  1. LD 评论 2008-12-01 23:17

    期待你自制的主题 :roll:

    回复

    joe 回复 十二月 2nd, 2008 at 09:18

    :oops: 第一次做可能要很久才做出来

    回复

  2. HicroKee 评论 2009-01-14 09:31

    XUL只能在Mozilla系列浏览器使用,常用于构建界面,使用XULRunner就可以构建桌面应用,以前写过一个BLOG,用XUL写得后台,叫KeeBlogSystem。

    回复

    joe 回复 一月 14th, 2009 at 10:52

    :( 汗,高深

    回复

  3. 小辉子 评论 2011-05-06 10:22

    哥们不行啊…我把代码复制过去实现不了…

    回复

Leave a Reply

Email address is not published

You should say a Chinese word to pass spam check. If you can not input Chinese, just copy 你好 and paste them into comment text box.