4

我需要一种方法来截断移动应用程序中间的字符串。该字符串最后包含我总是希望可见的重要信息。我一直无法在字符串的中间找到一个 CSS 方法来做这件事，只是开头或结尾。

我正在研究一种在 JS 中执行此操作的方法，但我认为这已经解决了，我不想重新发明轮子。我认为成为一个问题的事情是我需要它根据屏幕尺寸是动态的。我不能简单地说如果string.length > 100然后截断。我需要看看什么合适，然后截断，让它监听大小的变化，比如方向是否改变。

4

2 回答 2

5

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

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

这是它的页面：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);
}

这是这个例子的一个小例子（它使用了我的保管箱上的一个副本，所以很确定它不会永远工作）。

它是响应式的（在某种程度上，无论如何），并将省略号准确地放在您告诉它的位置。

于 2013-08-06T19:26:32.250 回答
1

我会怎么做...

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

于 2013-08-06T20:01:24.817 回答