Question

有没有办法在JavaScript中隐藏部分显示的div（或者可能使用一些CSS魔法）。

我的设置有一个固定宽度的父div，overflow: hidden和white-space: nowrap（所以div不会流到下一行）。从本质上讲，我不希望子代码（可变宽度和display: inline-block）在它们破坏布局时溢出时会进入下一行。

由于子div具有可变宽度并且不会突破到div的下一个“行”，因此其中一些在视图中隐藏，而一些仅部分显示。如果它们被隐藏了，那很好，但是部分显示的div看起来很傻（它们包含文本，所以有时它显示为半显示）。

使用JS以编程方式添加子div以响应实时数据，因此我无法知道在宽度变化时适合的数量。我只想隐藏那些流过div（overflow: hidden）边缘或部分显示的内容。

是否有一种简单的方法来隐藏那些部分显示的div？我真的不想查询子div的宽度，因为其他一些内容需要刷新很多，我不想用不必要的DOM属性查询来减慢刷新速度。

<div style='overflow: hidden; white-space: nowrap; max-width: 500px'>
     <div style='display: inline-block'> some text </div>
     <div style='display: inline-block'> some text </div>
     <div style='display: inline-block'> some text </div>
     <div style='display: inline-block'> partially shown </div>
     <div style='display: inline-block'> hidden </div>
     <div style='display: inline-block'> hidden </div>
</div>

Answer 1

正如我在评论中提到的，您可以使用jQuery .position()。然后，您将浏览内部divs并检查他们的top right位置与他们的容器。

围绕这些方面的事情：

CSS（仅限演示）

div div {
  background-color: red;
  width: 130px;
}

Javascript（jQuery）

$(function() {
  $("div div").each(function(index, element) {
    // By adding the element width to its left position you have the right 
    // position, which is not provided by the jQuery .position() method.
    var rightPos = $(this).position().left + $(this).width();

    var containerWidth = $(this).parent().width();

    // If the element top right corner position is outside its parent right edge,
    // it's being partially displayed, so hide it and also its subsequent 
    // siblings.
    if (rightPos > containerWidth) {
      $(this).hide().nextAll().hide();

      // Break the loop to save resources.
      return false;
    }
  });    
});

Demo

Answer 2

没有简单的方法来检查容器的内容是否超过宽度，您将不得不查询子div的宽度并检查父div的宽度

隐藏部分显示的div

2 个答案: