仅显示容器中可见的内容

Question

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

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

演示

.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;
}

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

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

Answer 1

只需将overflow:hidden用于父类.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;
}

<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>

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>