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

Question

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

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

简单的解决方案我想要一个脚本，将徽标的宽度逐个加起来，当满足某个宽度时，它会停止显示徽标。

例如：

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

http://jsfiddle.net/FDkRN/

我尝试了我所知道的，但我对 js 还是很陌生，所以任何帮助都会很棒。

提前致谢！

Answer 1

Does this achieve what you are wanting to do, without the use of javascript?

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

I'm assuming #container would be a #header type div - so you have hide the overflow on that.

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();  
    }
});

摆弄

Answer 4

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

css

#logos li { display:none; }

​</p>

$("#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()如果要删除元素而不仅仅是隐藏，也可以使用。