Question

我的网站上有一些div元素有标题。调整窗口大小时，标题可能会突破到新行。

我想避免这种情况，但我遇到的问题是当我切片标题并将较短的标题输入标签时，它按预期工作。现在，当我将窗口调整为更大的元素时，更短的标题就是现在。我怎样才能来回切换？

这是我目前使用的代码检查每个标题的长度，如果它大于27个字符，它将切片。代码如下：

new ResizeSensor($('#col1'), function(){
    if($('#col1').width() >= 330) {
        $('.stats').show();

        // how could I check here if the title was sliced and then unslice it?            

    }
    else {
        var titles = [];
        var lengths = [];

        $('.title-header').each(function() {
            var title = $(this).text();
            var length = $(this).text().length;

            titles.push(title);
            lengths.push(length);
        });

        for (var x = 0, len = titles.length; x < len; x++) {
            if (lengths[x] > 27) {
                var newTitle = titles[x].slice(0, -9);
                var oldTitle = $("#col" + x).find(".title-header").text();

                $("#col"+x).find(".title-header").text(newTitle + "...");
            }
        }

        $('.stats').hide();
    }
});

我知道我可以使用本地存储并存储标题，并在每次调整元素大小时使用它们。但我想知道是否有一种更简单的方式，我不思考或不知道。任何帮助表示赞赏。

Answer 1

非常简单的回答，我希望我的大脑早已看到很多：

var titles = [];
var lengths = [];

$('.title-header').each(function() {
    var title = $(this).text();
    var length = $(this).text().length;

    console.log('title is '+title);
    titles.push(title);
    lengths.push(length);
});

new ResizeSensor($('#col1'), function(){
    if($('#col1').width() >= 330) {
        for (var x = 0, len = titles.length; x < len; x++) {
            if (lengths[x] <= 33) {
                var newTitle = titles[x];

                $("#col"+x).find(".title-header").text(newTitle);
            }
        }

        $('.stats').show();
    }
    else {
        for (var x = 0, len = titles.length; x < len; x++) {
            if (lengths[x] > 27) {
                var newTitle = titles[x].slice(0, -9);

                $("#col"+x).find(".title-header").text(newTitle + "...");
            }
        }

        $('.stats').hide();
    }
});

只需在实际调整大小之前保存数组，以便在来回调整大小时可以使用它们。

元素大小上的切片和unslice标题

1 个答案: