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

Question

是否可以隐藏溢出文本的中间而不是结尾？例如用句点替换溢出的文本。

我现在在桌子上专门讨论，但任何可能的方式都很有用。

所以我的意思是将112233445566778899缩短为112...899（或类似的东西），而不是11223344

我不太了解JavaScript，但如果这是唯一的方式让我知道如何，我将通过教程找出其余部分。

Answer 1

我提出了一个纯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, 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），则可以将数字作为第二个参数传入{{1}功能：

shortenContent

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

窗口调整大小示例

每当窗口（在本例中为JSFiddle结果窗格）改变大小时，这将触发abcdefghijklmnopqrstuvwxyz => abcd...wxyz 函数。

shortenContent

Answer 2

使用Javascript，您可以执行以下操作：

function shortenNum(num){

    if(num.length > 6){
        var first = num.slice(0, 3); 
        var last = num.slice(-3); 
        //console.log(first + "..." + last );
        alert(first + "..." + last );
    } else {
        alert(num)
    }
}

// should return 112...899
shortenNum("112233445566778899");
shortenNum("19999");
shortenNum("3536355");

它接受一个字符串，并抓取前3个字符和最后3个字符，然后我们可以将它们连接在一起，再加上...

您也可以使用substring代替slice

<强> JSFiddle Demo

编辑：添加了字符串长度检查，应缩短超过6个字符的任何内容。

Answer 3

这是一个匿名的Javascript示例

这是Js （基于Nick R＆＃39评论）

$('.shortable').each(function(index) {
    //Get the Text
    var text = $(this).text();

    //Get the wanted Length
    var wantedLength = $(this).data('length')

    //Get the current Length
    var currentLength = text.length

    //If it should be shorten
    if (wantedLength < currentLength) {
        //Get Half Length
        var halfLength = Math.round(wantedLength / 2)

        //Get the Text Parts
        var first = text.slice(0, halfLength); 
        var last = text.slice(0-halfLength); 

        //Change the Text
        $(this).text(first + "..." + last);
    }
});

这是Html （查看属性）：

<p class="shortable" data-length="20">Lorem ipsum dolor</p>
<p class="shortable" data-length="20">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

这是输出：

Lorem ipsum dolor

Lorem ipsu... sit amet.    

这是你的小提琴：

http://jsfiddle.net/qHALz/6/

这是您的附加问题

  

是否有一种简单的Js方式将其应用于实际溢出的所有内容，而不是应用于不会发生的事情？

您可以将班级shortable和data-length属性附加到所有这些元素。

例如

<span class="shortable" data-length="20">Lorem Ipsum...</span>
<i class="shortable" data-length="20">Lorem Ipsum...</i>
<a class="shortable" data-length="20">Lorem Ipsum...</a>

Answer 4

使用CSS，在文本中间无法剪辑或椭圆

Quoting W3C :

  

现有行为

     

根据Mozilla和文本溢出的描述   当前W3C CSS UI模块规范中的定义   只有在开头和结尾处剪辑字符串的可能性。

Only Possible Solution来自JavaScript，这个主题可以帮到你：

<强> Ellipsis in the middle of a text (Mac style)

Answer 5

有一种方法可以使用html和css：

您可以使用带有content属性的css伪元素将数字替换为title或data-number等任何属性内容。

示例：

<div class="target" data-numbers="112...899" ><span>112233445566778899</span></div>

.target span{
    display:none;
}
.target:before{
    content:attr(data-numbers);    
}

http://jsfiddle.net/cUrjH/