是否有一种方法可以使用CSS或JS截断中间的字符串?(复制)

This question already has an answer here:

这个问题已经有了答案:

Ellipsis in the middle of a text (Mac style) 12 answers
在文本(Mac风格)中间省略12个答案

I need a way to truncate a string in the middle for a mobile app. The string has important info at the end that I always want to be visible. I haven't been able to find a CSS method to do it in the middle of the string, just the beginning or end.

我需要一种方法来在移动应用程序的中间截断一个字符串。这个字符串在末尾有一些重要的信息，我总是希望它是可见的。我还没能找到一个CSS方法在字符串中间做，只是开始或结束。

I am working on a method to do this in JS, but I would think this has been addressed already and I don't want to re-invent the wheel. The thing I see becoming an issue is that I need it to be dynamic based on the screen size. I can't simply say if string.length > 100 then truncate. I need to see what will fit, then truncate, and make it listen for changes to size like if the orientation is changed.

我正在开发一个用JS实现这一点的方法，但是我认为这已经解决了，我不想重新发明*。我看到的问题是，我需要基于屏幕大小的动态。我不能简单地说if字符串。长度>100然后截断。我需要知道什么是合适的，然后截短，并让它听改变大小，比如如果方向改变了。

2 个解决方案

#1

With css, you can easily use ellipsis, but only at the end of the text.

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

However, there is a jQuery plugin called dotdotdot, which can do this.

但是，有一个叫做dotdotdot的jQuery插件可以做到这一点。

Here's it's page: DotDotDot

这是它的页面:DotDotDot

One of their demo examples shows, how a long URL can be turned into
www.website.com/that/should/... /file.html

他们的一个演示示例显示，一个长的URL如何可以被转换成www.website.com/that/should/…。/ file.html

I spent some time trying to get this working properly, and it's still not quite perfect, but works pretty well.

我花了一些时间试图让它正常工作，它仍然不是很完美，但是工作得很好。

// @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);
}

Here's a fiddle of this example (it uses a copy hosted on my dropbox, so it's quite sure that it won't work forever).

这里有一个例子(它使用了我的dropbox上的一个副本，所以它肯定不会永远工作)。

It is responsive (to some extent, anyway), and puts the ellipsis exactly where you tell it to.

它是响应性的(无论如何，在某种程度上)，并且把省略号放在你告诉它的地方。

#2

How I would do it is...

我该怎么做……

Choose a monospace font so each character is the same width. Then figure out the width of each character at the font-size you wish. Then figure out, dynamically, how many characters you can fit inside the element or window at hand; that will be the max. Then you can use that max number in your truncation function which would make the new string length max minus 4 (subtract 3 for "..." and 1 so the last character doesn't accidentally slide offscreen).

选择单色字体，这样每个字符的宽度都是相同的。然后计算出您希望的字体大小的每个字符的宽度。然后动态地计算出你可以在手边的元素或窗口中容纳多少字符;那将是最大的。然后，你可以在截断函数中使用最大数字，使新的字符串长度最大减4(“…”减去3,1，这样最后一个字符就不会意外滑出屏幕)。

#1