如果宽度大于屏幕宽度，如何隐藏动态内容？

Question

我在行内块中显示了两个元素； 一个图像和一个文本。 文本是动态的，所以它可以有任何宽度。 当这两个元素组合起来比页面宽时，我想隐藏图像。

我在页面调整大小上试过这个：

if ($(window).width() == $('#id').width()) {
    document.getElementById('image').style.display = 'none';
} else {
    document.getElementById('image').style.display = 'block';
}

这无法正常工作。 有任何想法吗？

Answer 1

如果初始窗口小于或等于，则将其更改为<= ：

function updateLayout() {
    //Hide header image on smaller screens
    if ($(window).width() <= $('#logo-image').width()) {
        document.getElementById('logo-image').style.display = 'none';
    } else {
        document.getElementById('logo-image').style.display = 'inline-block';
    }
}

更新

Answer 2

我找到了解决方案。

通过检查内部div而不是使用外部div，我可以获得正确的宽度。 随着外部div宽度的变化，图像被隐藏的瞬间。

Answer 3

如果您想将图像和文本保留在块中，但由于宽度较大而将它们的一部分切出屏幕，则可以在嵌入式块中添加“ overflow：hidden”。 试试吧。