日期:2014-05-16  浏览次数:20295 次

firefox下使用js模拟text-overflow:ellipsis效果的快速实现
/**
     * 计算textOverflow样式需要选择的字符
     * @private
     *
     * @param {Element} el Element对象
     * @param {Number} width 容器宽度
     * @param {Boolean} ellipsis 是否一定要出现省略号
     */
    _count: function (el, width, ellipsis) {
        /* 计算cache的名称 */
        var o = E.get(el), fontWeight = o.fontWeight, cacheName =
                'font-family:' + o.fontFamily + ';font-size:' + o.fontSize
                + ';word-spacing:' + o.wordSpacing + ';font-weight:' + (fontWeight.number() == 401 ? 700 : fontWeight)
                + ';font-style:' + o.fontStyle + ';font-variant:' + o.fontVariant,
            cache = E.Cache[cacheName];

        if (!cache) {
            o = E.appendTo(E._eEmpty, el);

            E.set(o, 'float:left;' + cacheName);
            cache = E.Cache[cacheName] = [];

            /* 计算ASCII字符的宽度cache */
            for (i = 0; i < 256; i++) {
                i == 32 ? (o.innerHTML = '&nbsp;') : E.setText(o, String.fromCharCode(i));
                cache[i] = o.offsetWidth;
            }

            /* 计算非ASCII字符的宽度、字符间距、省略号的宽度 */
            E.setText(o, '一');
            cache[256] = o.offsetWidth;
            E.setText(o, '一一');
            cache[257] = o.offsetWidth - cache[256] * 2;
            cache[258] = cache['.'.charCodeAt(0)] * 3 + cache[257] * 3;

            E.set(o, '');
            o.innerHTML = '';
            E.appendTo(o);
        }

        for (
            /* wordWidth是每个字符或子节点计算之前的宽度序列 */
            var node = el.firstChild, charWidth = cache[256], wordSpacing = cache[257], ellipsisWidth = cache[258],
                wordWidth = [], ellipsis = ellipsis ? ellipsisWidth : 0;
            node;
            node = node.nextSibling
        ) {
            if (width < e