在HTML中隐藏溢出文本的中间

我提出了一个纯JavaScript解决方案,将 Nick R’s和 alhoseany’s答案结合在一起,同时添加了一些额外的功能来检测长度,并指定省略号两边所需的字符数.

使用这种方法,您不需要知道容纳在容器中的字符数,它们都是自动完成的,并且也可以在窗口调整大小时触发.

JSFiddle demo.

调整结果框架大小以查看结果.

结果

这个：

…成为这样

…或这个：

…或这个！

代码

CSS

p {
    border: 1px dashed #000;
    position: relative;
    display: block;
    width: 50%;
}

p:before {
    content:attr(data-shortened);
    color: #000;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

JavaScript的

function shortenContent(content,chars) {
    /* chars here determines how many characters
     * we want on either side of the elipsis. */
    var chars = chars || 3; // Default is 3

    if (!content && !content.length)
        return;

    /* Loop through each content element and
     * shorten where necessary. */
    for (i = 0; i < content.length; i++) {
        var el = content[i],elementWidth = el.offsetWidth,textWidth = el.scrollWidth;

        /* If our element's width is less than
         * its content's width,we need to shorten. */
        if (elementWidth < textWidth) {
            var text = el.innerText;
            /* Set the data attribute for the CSS to use. */
            el.setAttribute(
              'data-shortened',text.slice(0,chars) +'...'+ text.slice(-chars)
            );
            el.style.color = 'rgba(0,0)';
        }
        /* Otherwise,ensure non-shortened text is visible. */
        else {
            el.setAttribute('data-shortened','');
            el.style.color = null;
        }
    }
}

如何使用？

要使用上述函数,只需要将一个元素集合传入shortenContent函数：

// Get the content we wish to shorten
var content = document.querySELEctorAll('div p');

/* trigger the function initially. */
shortenContent(content);

abcdefghijklmnopqrstuvwxyz    =>    abc...xyz

指定不同数量的字符

如果要在省略号之前和之后出现不同数量的字符(例如,abcd … wxyz而不是abc … xyz),则可以将一个数字作为第二个参数传入shortenContent函数：

/* trigger the function initially. */
shortenContent(content,4);

abcdefghijklmnopqrstuvwxyz    =>    abcd...wxyz

窗口调整大小示例

当窗口(在这种情况下,JSFiddle结果窗格)改变大小时,这将触发shortenContent函数.

/* Fire the shorten function when the window resizes. */
window.onresize = function(event) {
    shortenContent(content);
};