文字溢出以省略号显示

在实际的项目中，由于文字内容的长度不确定性和页面布局的固定性，难免会出现文字内容超过div（或其他标签，下同）区域的情况，此时比较好的做法就是当文字超过限定的div宽度后自动以省略号（…）显示，这样，按照习惯，人们都会知道这儿有文字被省略了。css中有个属性叫做text-overflow:ellipsis;配合其他一些属性可以实现IE,chrome,safria浏览器下文字溢出点点点省略号显示，在加上opera浏览器的私有属性-o-text-overflow:ellipsis;就目前而言，可以实现Firefox浏览器以外的所有主流浏览器的文字溢出点点点省略号显示。所以传统方法：

.zxx_text_overflow

　　{　　

　　width:27em;

　　overflow:hidden；

　　 white-space:nowrap;

　　text-overflow:ellipsis;

　　-o-text-overflow:ellipsis;/*兼容Opera*/
　　}

兼容火狐浏览器,这是老外提供的一种方法，使用Firefox的私有属性调用一个XML文件，可以使Firefox火狐浏览器下文字溢出后以省略号的形式显示。调用方法如下：

-moz-binding:url('ellipsis.xml#ellipsis');

ellipsis.xml文件：

<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 crop="end" xbl:inherits="value=xbl:text">
<children/>
</xul:description>
</content>
</binding>
</bindings>

需要注意的是：此XML文件不支持向上路径的访问，也不支持绝对路径的访问。也就是说此XML文件需要放在调用文件（css文件，或HTML文件）的同目录下或下一级目录下，不能向上访问。原因我是不清楚的，我反复试验，都证明如此。

两种结合起来

.zxx_text_overflow{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('ellipsis.xml#ellipsis'); overflow:hidden;}

二、margin负值定位法

简要说明：此方法兼容IE6，IE7（IE8未测过），Firefox，chrome，Safari，opera浏览器。没有hack，没有生僻的css样式。文字短时，没有省略号，文字溢出时就出现省略号。可以说是相当不错的一个方法。原理也很简单：当文字内容足够长时就把隐藏在上面的省略号层给挤下来了。关键就是点点点所在div层的高度的绝对值要比其margin的绝对值大那么一点点。如果您不习惯用em做单位，直接换作px就可以了，效果是一样的。

<div class="zxx_text_overflow" >
     <div class="zxx_con" >这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。</div>
    <div class="zxx_dotted" >…</div>
</div>

.zxx_text_overflow{
    width:24em; height:1.3em; overflow:hidden; zoom:1;
}
.zxx_con{
    float: left;
     height:1.3em; 
     margin-right:3em; 
    overflow:hidden;
}
.zxx_dotted{
    float: right;
    width:3em;
    height:1.31em; 
    float:right; 
    margin-top:-1.3em;
}

三、jQuery限制字符字数的方法

        //限制字符个数 js限制字数
$(".zxx_text_overflow").each(function(){
    var maxwidth=23;
    if($(this).text().length > maxwidth){
        $(this).text($(this).text().substring(0,maxwidth));
        $(this).html($(this).html()+'...');
    }
});

jQuery自动判断宽度是否超出的方法

相比较前面一种方法，这个js实现的方法更加智能些（也更占用资源），通过复制节点（就是需要判断是否文字溢出省略号显示的标签层），获取其宽度，再判断其宽度是否大于样式中给定的宽度限值，大于则去掉尾部字符，添加省略号，循环，直到复制的层的宽度小于css给定值。
js代码如下：

var wordLimit=function(){
    $(".zxx_text_overflow").each(function(){
        var copyThis = $(this.cloneNode(true)).hide().css({
             'position': 'absolute',
              'width': 'auto',
           'overflow': 'visible'
        });
    $(this).after(copyThis);
     if (copyThis.width()>$(this).width()) {
        $(this).text($(this).text().substring(0,             
                 $(this).html().length-4));
        $(this).html($(this).html()+'...');
         copyThis.remove();
         wordLimit();
    } else {
     //清除复制
     copyThis.remove(); 
    }
    });
}
    wordLimit();

css部分需要给定一个宽度值，例如：

.zxx_text_overflow { width: 400px; }

四、多行文字时省略

 <p class="box" >
             这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。
             这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。
             这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。
             这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。 
</p>

/*多行文字时省略*/
        .box {
            width:24em;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

参考.张鑫旭http://www.zhangxinxu.com/wordpress/?p=230