Question

我目前正在使用一个小插件（jTruncate），当文本超过某个字母阈值时会截断文本 - 我想知道，我可以将该字母阈值与屏幕大小联系起来吗？

例如

如果在＆lt; 320 px下显示屏幕 - 显示45个字母
如果在＆lt; 500 px下显示屏幕 - 显示60个字母

$().ready(function() {  
    $('#recent').jTruncate
    ({  
        length: 45,
        moreText: [""],
    });
});

Answer 1

作为Javascript的替代方案，您可以使用CSS媒体查询并将最后15个字符包裹在较小分辨率中隐藏的范围内。

Answer 2

http://jsfiddle.net/EwNxR/8/这是一个带有js的演示。但是我确实建议使用媒体查询，正如Jimbo在他的回答中所说的那样。

代码中需要注意的重要事项：
1）您可能希望监听页面调整大小和操作。在页面加载时运行代码没有意义，因此在用户调整浏览器窗口大小时没有意义 2）如果IE6不是问题，你不应该使用jQuery $（window）.height（）。使用window.innerHeight。

window.onresize = resizer;
function resizer() {
    if (window.innerWidth < 960) {
        $('#recent').jTruncate({
            length: 45,
            moreText: [""],
        });
    }
}

我不是100％熟悉插件，但是如果选项的结构类似于jQuery插件，通常你应该能够在页面加载时初始化它，然后只需更改长度值。

var recent = $('#recent'),
    defaultLength = 256; // default, can be whatever.
window.onresize = resizer;
recent.jTruncate({ length: defaultLength, moreText: [""] });
function resizer() {
    if (window.innerWidth < 960) {
        recent.jTruncate("length", 45); // don't re-init the plugin, just change the option.
    } else {
        recent.jTruncate("length", defaultLength); // page resized and truncating is no longer needed to be shorter.
    }
}

Answer 3

只需使用window。

var win_width = $(window).width();
var win_height = $(window).height();

根据屏幕大小更改jQuery

3 个答案: