Question

好的，所以我有两个显示内联块的元素;一个图像和一个文本。文本是动态的，因此根据具体情况可以有任何宽度。

我想要做的是当这两个元素组合比页面宽时隐藏图像。

目前我正在尝试使用

if ($(window).width() == $('#header-top-inner').width()) {
    document.getElementById('logo-image').style.display = 'none';
} else {
    document.getElementById('logo-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';
    }
}

updated

Answer 2

我找到了解决方案。

不是使用外部div，通过检查内部div，我可以得到正确的宽度。由于外部div的宽度会改变隐藏图像的时刻。

Answer 3

如果你想保留块中的图像和文本，但是因为宽度较大而将它们中的一部分剪切掉，那么你可以在你的内联块中添加'overflow：hidden'。试试吧。

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

3 个答案: