javascript - 隐藏部分显示的 div

Question

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

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

由于子 div 具有可变宽度并且不会中断到 div 的下一个“行”，因此其中一些从 View 中隐藏，而一些仅部分显示。如果它们是隐藏的，那很好，但是部分显示的 div 看起来很傻(它们包含文本，所以有时会显示一半)。

子 div 是通过 JS 以编程方式添加的，以响应实时数据，所以我无法知道随着宽度的变化有多少适合。我只想隐藏那些溢出 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()。然后，您将遍历内部 div 并检查它们相对于容器的 右上角 位置。

围绕这些行的东西:

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