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

How to hide dynamic content if it's width is greater than screen width?

本文关键字：屏幕 大于 如果 隐藏 何隐藏 动态      更新时间：2023-09-26

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

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

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

这不正常工作。有什么想法吗？

如果您想将图像和文本保留在块中，但由于宽度较大而将部分图像和文本剪切出屏幕，则可以在内联块中添加"overflow：hidden"。试试看。

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

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';
    }
}

更新的

相关文章：