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

Ok, so I have two elements displayed inline-block; one an image and one text. The text is dynamic, so it can have any width depending on the situation.

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

What I want to do is hide the image when these two elements combined become wider than the page.

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

Example: http://jsfiddle.net/rs2aef7w/

示例：http：//jsfiddle.net/rs2aef7w/

Currently I'm trying to use

目前我正在尝试使用

if ($(window).width() == $('#header-top-inner').width()) {
    document.getElementById('logo-image').style.display = 'none';
} else {
    document.getElementById('logo-image').style.display = 'block';
}

On page resize.

在页面上调整大小。

Currently the logic I'm using isn't working correctly; by looking at the live website you should see why. But I just can't seem to work out a solution. I mean I'd normally use media queries, but can't in this case due to the dynamic content. Any ideas?

目前我使用的逻辑工作不正常;通过查看实时网站，你应该明白为什么。但我似乎无法找到解决方案。我的意思是我通常使用媒体查询，但在这种情况下由于动态内容不能。有任何想法吗？

3 个解决方案

#1

I've found a solution.

我找到了解决方案。

Rather than using the outer div, by checking the internal div's I can get the correct width. As the width of the outer div changes the moment the image is hidden.

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

#2

Changed it to <= in case the initial window is less than or equal:

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

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

更新

#3

-1

if you want to keep the image and text in the block but cut part of them which they are out of the screen because of larger width , you can add 'overflow:hidden 'to your inline block. Try it.

如果你想保留块中的图像和文本，但由于宽度较大而将它们中的一部分切割出屏幕，你可以在内联块中添加'overflow：hidden'。尝试一下。

#1