例如：

Question

我有一个标题文字更改长度。我还有一组静态长度的徽标。

问题：当标题（文本）太长或太短时，徽标要么没有有效使用空间，要么徽标最终会转到另一行。

简单术语解决方案我想要一个逐个累加徽标宽度的脚本，当达到某个宽度时，它会停止显示徽标。

例如：

- 隐藏徽标 - 标题空间为400px
- 容器是800px
- 剩余空间为400px
- 脚本将逐个添加徽标，直到400px满足为止 - 如果第4个徽标为450px，则不会显示该徽标或任何其他徽标。

http://jsfiddle.net/FDkRN/

我尝试了我所知道的，但我仍然是js的新手，所以任何帮助都会很棒。

提前致谢！

Answer 1

如果不使用javascript，这会实现您想要做的事吗？

http://jsfiddle.net/FDkRN/3/

我假设#container是#header类型div - 所以你可以隐藏溢出。

Answer 2

修正标题的宽度，使其不越过边界并设置徽标容器以隐藏溢出内容

h5 { width: 800px; }
#logos ul { white-space: nowrap; width: 400px; overflow: hidden; }

Answer 3

以下是我如何使用jQuery进行处理，但您可能希望使用@mikevoermans答案。

var sum = 0;
$("#logos>ul>li").each( function() {
    sum += $(this).width();
    if (sum > 200) {
       $(this).hide();  
    }
});

Fiddling

Answer 4

你应该这样做，但这是一种不好的做法。

CSS

#logos li { display:none; }

$("#logos ul li").each(function(){
    if ($(this).parents("#logos").width() < 200) 
        $(this).show();
});

http://jsfiddle.net/ocanal/FDkRN/7/

Answer 5

这将累计总徽标宽度并在满足特定最大宽度后隐藏所有徽标：

$(document).ready(function(){

var maxWidth = 200;
var totalWidth = 0;

    $('#logos li').each(function(){
        var logoWidth = parseInt($(this).width());

        if(totalWidth + logoWidth > maxWidth)
        {
           $(this).hide();   
        }

        totalWidth += logoWidth;
    });


});

如果您想删除元素而不是隐藏，也可以使用$(this).remove()。

将元素的宽度相加，直到达到天花板

例如：

5 个答案: