`

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 < ellipsis) {
                E.appendTo(node);
            }
            else if (node.nodeType == 3) {
                for (var i = 0, text = node.nodeValue, length = text.length; i < length; i++) {
                    o = text.charCodeAt(i);
                    /* 计算增加字符后剩余的长度 */
                    wordWidth.push([width, node, i]);
                    width -= (i ? wordSpacing : 0) + (o < 256 ? cache[o] : charWidth);
                    if (width < ellipsis) {
                        break;
                    }
                }
            }
            else {
                o = node.tagName;
                if (o == 'IMG' || o == 'TABLE') {
                    /* 特殊元素直接删除 */
                    o = node;
                    node = node.previousSibling;
                    E.appendTo(o);
                }
                else {
                    wordWidth.push([width, node]);
                    width -= node.offsetWidth;
                }
            }
        }

        if (width < ellipsis) {
            /* 过滤直到能得到大于省略号宽度的位置 */
            while (o = wordWidth.pop()) {
                width = o[0];
                node = o[1];
                o = o[2];
                if (node.nodeType == 3) {
                    if (width >= ellipsisWidth) {
                        node.nodeValue = node.nodeValue.substring(0, o) + '...';
                        return true;
                    }
                    else if (!o) {
                        E.appendTo(node);
                    }
                }
                else if (E._count(node, width, true)) {
                    return true;
                }
                else {
                    E.appendTo(node);
                }
            }

            /* 能显示的宽度小于省略号的宽度,直接不显示 */
            el.innerHTML = '';
        }
    }
分享到:
评论

相关推荐

    FF下文本溢出的text-overflow完美解决方方案

    在Firefox中,由于其对`text-overflow`的支持略有不同,可能需要额外的技巧来实现预期效果。以下是几个解决Firefox下文本溢出问题的方法: 1. 使用`-moz-binding`:Firefox支持一个非标准的`-moz-binding`属性,...

    firefox下溢出部分省略号显示

    例如,对于多行文本的省略,Firefox支持CSS3的`-moz-line-clamp`属性,而其他浏览器可能需要使用伪元素和绝对定位来模拟这个效果。 在提供的文件列表中,`test.htm`可能是一个包含上述CSS样式的HTML文件,而`...

    移动端的text-overflow多行文本溢出显示省略号(…)

    本文将探讨如何在不同场景下实现多行文本溢出显示省略号的效果。 首先,对于基于WebKit的浏览器(如Safari和Chrome,以及大部分移动端浏览器),我们可以利用WebKit的私有属性`-webkit-line-clamp`。这是一个不受...

    css中text-overflow属性与文本截断详解

    对于多行文本的复杂截断需求,可以使用CSS伪元素`:after`来模拟截断效果,通过`linear-gradient`创建渐变背景来模拟省略号。但这通常会导致一些问题,比如在中文环境下表现不稳定。 ### 问题与局限性 尽管`-webkit...

    css把超出的部分显示为省略号的方法兼容火狐

    `li a`元素的样式中包含了`overflow: hidden`、`white-space: nowrap`和`text-overflow: ellipsis`,而在Firefox兼容性部分,通过`max-width`、`float`和`:after`伪元素实现了省略号效果。 通过这种方式,可以确保...

    纯 CSS 实现多行文字截断功能

    【纯 CSS 实现多行文字截断功能】 在前端开发中,尤其是在响应式设计中,有时我们需要对标题或内容进行多行文字截断,以适应不同的...同时,可以结合 JavaScript 动态调整样式,以在更多场景下实现多行文字截断效果。

    css 超过宽度的文字显示点点

    `text-overflow`、`white-space` 和 `overflow` 属性组合使用,就可以实现这种效果,即“超过宽度的文字显示点点”。下面我们将深入探讨这三个属性及其相互作用。 首先,`text-overflow` 属性是用来控制当文本溢出...

    单行文本与多行文本溢出时显示省略号的CSS设置

    在CSS中,我们可以使用`text-overflow`属性配合`white-space`和`overflow`属性来实现单行文本溢出时显示省略号的效果。具体代码如下: ```css .single-line-ellipsis { overflow: hidden; /* 隐藏超出部分 */ ...

    国内外 JavaScript 经典封装

    在Firefox中,CSS的`text-overflow: ellipsis;`属性可能无法直接生效,这时就需要借助JavaScript来实现。通过计算元素的实际宽度和文本长度,当文本超过设定的宽度时,可以用省略号替换超出的部分,从而保持布局的...

    css浏览器兼容整理

    text-overflow: ellipsis; white-space: nowrap;`来实现文本溢出后的省略号效果。 #### 七、链接 1. **游标手指cursor** - 使用`cursor: pointer;`来改变鼠标指针样式。 2. **给a标签内内容加上样式** - ...

    表单文件选择框样式自定义示例

    请注意,由于浏览器兼容性问题,上述代码使用了一些前缀(如`-moz-`,`-webkit-`)以支持旧版本的Firefox和Safari。在实际开发中,你可能需要使用Autoprefixer等工具自动处理这些前缀,以确保代码在各种浏览器上的...

    web前端超出两行用省略号表示的实现方法

    为了实现更好的跨浏览器兼容性,可以考虑使用JavaScript库如`clamp.js`或者使用CSS calc()函数结合伪元素来模拟实现。例如,可以创建一个伪元素`::after`,在其内部放置省略号,并通过计算文本的字符数来动态调整...

    浏览器兼容性问题

    - **解决方法**:使用CSS的`text-overflow: ellipsis; white-space: nowrap; overflow: hidden;`属性组合来实现。 ##### 20. 为什么web标准中IE无法设置滚动条颜色了 - **问题描述**:在新的web标准中,IE不再支持...

    关于Firefox下截取后省略号的问题

    今天在用到text-overflow的ellipsis属性得时候,突然发现原来FF下是没有省略号得(才发现,汗)。不想把这个问题交给后台或者用JS来做了,于是找了个折中的办法,就是:after伪类来模拟FF下的省略号。具体做法就是给...

    不错的整理的24则css技巧

    20. 在表单中,若需要将文本框中的文字垂直居中,可以通过设置上下补白来实现,尤其是在Firefox浏览器中行高与高度组合无效的情况下。 21. 在定义链接的样式时,如果只定义了a:link,则需要记得定义其他三种状态(a...

Global site tag (gtag.js) - Google Analytics