仅显示容器中可见的内容

Question

在下面的演示中，您可以看到我有2个divs，其中一个包含文字t，另一个包含s。它们都包含在.items

中

目前这两个都是可见的，但我尝试创建它，以便（在这种情况下）只有t可见。

演示

＆＃13;

＆＃13;

.t {
  width: 200px;
  height: 30px;
  border: 1px solid #9e9e9e;
  margin: 0 auto;
  position: relative;
  top: 100px;
}

.items {
  position:absolute;
  width: 100%;
  top:-30px;
}

.item{
  height: 30px;
  line-height:30px;
}

＆＃13;

<div class="t">
  <div class="items">
    <div class="item">
      s
    </div>
    <div class="item">
      t
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我可以添加一些css属性，所以我可以实现这个吗？

Answer 1

只需将.t用于父类.t { width: 200px; height: 30px; border: 1px solid #9e9e9e; margin: 0 auto; position: relative; top: 100px; overflow: hidden; } .items { position: absolute; width: 100%; top: -30px; } .item { height: 30px; line-height: 30px; }

即可

Stack Snippet

<div class="t">
  <div class="items">
    <div class="item">
      s
    </div>
    <div class="item">
      t
    </div>
    <div class="item">
      s
    </div>
    <div class="item">
      t
    </div>
  </div>
</div>

mUploads

Answer 2

我认为这样做你需要javascript和Jquery

而不是css({color: 'red'})您可以添加课程addClass('visible')

var $t = $('.t');
y = $t.offset().top;
y2 = y + $t.outerHeight(); 

x = $t.offset().left;
x2 = x + $t.outerWidth();


$items = $t.find('.item')
$items.each(function(index, elmt){
  var elmtY = $(elmt).offset().top;
  var elmtY2 = elmtY + $(elmt).outerHeight();
  
  var elmtX = $(elmt).offset().left;
  var elmtX2 = elmtY + $(elmt).outerWidth();
	if(elmtY > y && elmtY2 < y2 && elmtX > x && elmtX2 < x2){
  	$(elmt).css({color: 'red'})
  }
});

.t {
  width: 200px;
  height: 30px;
  border: 1px solid #9e9e9e;
  margin: 0 auto;
  position: relative;
  top: 100px;
}

.items {
  position:absolute;
  width: 100%;
  top:-30px;
}

.item{
  height: 30px;
  line-height:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="t">
  <div class="items">
    <div class="item">
      s
    </div>
    <div class="item">
      t
    </div>
  </div>
</div>