jQuery-检测窗口宽度

Question

我有这个小脚本，在这里我尝试检测窗口大小以应用元素的字符限制。

检测不起作用的问题。 始终应用限制150。

我设置了警报以查看是否检测到，现在我确定他总是会应用相同的警报。

有人可以帮助我找出此脚本的问题吗？

这是我的代码：

$(function () {
        $(".block6 p").each(function (i) {
            len = $(this).text().length;
            if (len > 10) {
                if ($(window).width() <= 1280) {
                    $(this).text($(this).text().substr(0, 150) + '...');
                }
                else if ($(window).width() > 1280) {
                    $(this).text($(this).text().substr(0, 10) + '...');
                }
            }
        });
    });

Answer 1

您的代码只能在document.ready上运行一次。 每次调整窗口大小时，您都需要运行测试：

    $(window).on('resize',function() {
        if ($(window).width() <= 1280) {
            $(".block6 p").each(function (i) {
                var len = $(this).text().length;
                if (len > 10) {
                    $(this).text($(this).text().substr(0, 150) + '...');
                }
            });
        } else { //if ($(window).width() > 1280) {
            $(".block6 p").each(function (i) {
                var len = $(this).text().length;
                if (len > 10) {
                    $(this).text($(this).text().substr(0, 10) + '...');
                }
            });
        }
    });

    $(document).ready(function() {
        $(window).trigger('resize');
    }

http://jsfiddle.net/mblase75/6PQ4Q/

就是说，您的问题在于直接更改每个元素的文本，因此通过调整浏览器大小来回切换将具有破坏性。 我建议尽可能使用text-overflow: ellipsis 。