咨询：如何用CSS实现仅显示容器可视区域内的指定内容？

当然可以啦！其实只需要简单调整CSS就能实现你要的效果，我给你两种贴合需求的思路：

方法一：利用容器裁剪（精准匹配“仅显示可视区域内容”的需求） #

你的.t容器现在没有设置溢出内容的处理规则，所以超出它范围的.item也会显示出来。只需要给.t添加overflow: hidden属性，任何超出.t可视范围的内容就会被自动裁剪掉。

结合你现有代码的定位设置：.items的top: -30px刚好让第二个.item（文本t）落在.t的30px高度范围内，而第一个.item（文本s）会跑到.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>
</div>

方法二：直接隐藏指定元素 #

如果你只是单纯想让文本s消失，不需要依赖容器可视区域的规则，也可以直接给第一个.item设置隐藏样式：

.item:first-child {
  display: none;
}

这两种方法的区别：第一种是通过容器的可视区域裁剪来实现，完全符合你描述的“仅显示容器可视区域内内容”的需求；第二种操作更直接，适合不需要保留s元素位置的场景，你可以根据实际需求选择~

内容的提问来源于stack exchange，提问作者user7255640