1

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

例如

如果屏幕尺寸低于 <320 像素 - 显示 45 个字母
如果屏幕尺寸低于 <500 像素 - 显示 60 个字母 

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

3 回答 3

2

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

于 2012-12-10T22:09:11.393 回答
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.
    }
}
于 2012-12-11T15:12:06.937 回答
-3

只需使用window.

var win_width = $(window).width();
var win_height = $(window).height();
于 2012-12-10T21:58:12.527 回答