有没有一种使用CSS或JS截断字符串中间部分的方法？

Question

有没有一种使用CSS或JS截断字符串中间部分的方法？

4

我需要一种在移动应用程序中截取字符串的方法。该字符串的末尾包含重要信息，我希望始终可见。我没有找到CSS方法来截取字符串中间部分，只有在开头或者结尾。我正在尝试使用JS来解决这个问题，但我认为这已经有人解决过了，我不想重新发明轮子。我看到的可能成为问题的是，我需要根据屏幕大小动态调整。我不能仅仅说如果 string.length > 100 就截断。我需要查看适合屏幕的长度，然后截断，并使其响应大小更改（例如方向更改）。

- John S

CSS中的text-overflow: ellipsis只能在开头或结尾起作用。是的，为什么（以及如何）你想要在中间分割它呢？ - Bergi

2

@Bergi 有时候展示开头和结尾是很重要的。我知道我们在我们的网站上这样做，因为用户可能会有很多域名。所以他们可能会有一个非常长的域名，例如areallyreallyreallylongdomain.com和areallyreallyreallylongdomain.net。如果只截取结尾，那么用户很难快速确定哪个域名是哪个，因为它们都会以areallyreallyrea...结束。 - o_O

2个回答

1

我会这样做...

选择等宽字体，使每个字符的宽度相同。然后确定所需字体大小下每个字符的宽度。然后动态地确定在该元素或窗口中可以容纳多少个字符；那将是最大值。然后您可以在截断函数中使用该最大数字，该函数将使新字符串长度为max减4（减去3个“…”和1个使最后一个字符不会意外滑出屏幕）。

- Joe Simmons

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MightyPork · Accepted Answer

使用css，您可以很容易地使用省略号，但只能在文本末尾使用。

然而，有一个名为“dotdotdot”的jQuery插件可以实现这一点。

这是它的页面：DotDotDot 其中一个演示示例展示了如何将长URL转换为www.website.com/that/should/... /file.html

我花了一些时间来使其正常工作，虽然还不完美，但已经相当不错了。

// @param element    obtained with $("selector")
// @param spacer     ' ' for text, or '/' for links.
// @param position   number of words to leave at end
function doEllipsis(element, spacer, position) {
    $(element).data('ell-orig', $(element).html());
    $(element).data('ell-spacer', spacer);
    $(element).data('ell-pos', position);

    var pieces = $(element).html().split(spacer);
    if (pieces.length > 1) {

        var building = "";

        var i = 0;


        // for "position" to mean "fraction where to wrap" (eg. 0.6), use this:
        // for (; i < pieces.length*position; i++) {    

        for (; i < pieces.length-position; i++) {
            building += pieces[i] + spacer;
        }


        building += '<span class="ell">';

        for (; i < pieces.length; i++) {
            building += pieces[i] + spacer;
        }

        building += '</span>';

        $(element).html(building);

        $(element).dotdotdot({
            after: 'span.ell',
            wrap: 'letter'
        });
    }
}

// use to redraw after the size changes etc.
function updateEllipsis(element) {
    var orig = $(element).data('ell-orig');
    var spacer = $(element).data('ell-spacer');
    var pos = $(element).data('ell-pos');

    $(element).trigger("destroy");
    $(element).empty();

    $(element).html(orig);

    doEllipsis(element, spacer, pos);
}

这是一个关于it技术的示例，这里有一个fiddle（它使用我在dropbox上托管的副本，所以它不会永远有效）。这个示例是响应式的（在某种程度上），并且可以精确地将省略号放在您指定的位置。