有没有办法使用CSS或JS截断中间的字符串？

Question

我需要一种方法来截断移动应用程序中间的字符串.字符串最后有重要信息,我总是希望可见.我无法在字符串中间找到一个CSS方法,只是在开头或结尾.

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

Answer 1

使用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);
}

这是这个例子的小提琴(它使用我的Dropbox上托管的副本,所以它确定它不会永远工作).

它响应(在某种程度上,无论如何),并将省略号准确地放在你告诉它的位置.