你如何只在较小的父div中显示较大的子div的某些部分

Question

所以我的div比它的父母大得多。我希望它只显示适合父母的内容，其余内容不被隐藏。

Answer 1

在父overflow: hidden上使用div。

div.outer {
  height: 100px;
  width: 100px;
  
  overflow: hidden;
}

div.inner {
  height: 500px;
  width: 500px;
}

<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel sapien pretium, faucibus nibh sit amet, pretium lacus. Etiam mollis nisl mi, et tempus elit accumsan ut. Nunc luctus eget mi nec ultricies. Etiam vehicula et lectus et condimentum. Mauris euismod at diam et facilisis. Cras et purus eget felis fermentum suscipit ut vitae purus. Curabitur consectetur blandit nibh, sed efficitur justo posuere id. Quisque aliquam, felis vel auctor pulvinar, urna mi condimentum tellus, in accumsan enim est ut mauris.
  </div>
</div>

或者，如果您想要滚动，请使用overflow: scroll：

div.outer {
  height: 100px;
  width: 100px;
  
  overflow: scroll;
}

div.inner {
  height: 500px;
  width: 500px;
}

<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel sapien pretium, faucibus nibh sit amet, pretium lacus. Etiam mollis nisl mi, et tempus elit accumsan ut. Nunc luctus eget mi nec ultricies. Etiam vehicula et lectus et condimentum. Mauris euismod at diam et facilisis. Cras et purus eget felis fermentum suscipit ut vitae purus. Curabitur consectetur blandit nibh, sed efficitur justo posuere id. Quisque aliquam, felis vel auctor pulvinar, urna mi condimentum tellus, in accumsan enim est ut mauris.
  </div>
</div>

Answer 2

＆＃13;

＆＃13;

#wrapper { 
  width: 200px;
  height: 200px;
  border: 1px solid #333;
  background-color: yellow;
  overflow: hidden;
}
#child {
  width: 500px;
  height: 500px;
  float: left;
  position: relative;
  left: 50px;
  background-color: red;
}

＆＃13;

<div id="wrapper">
  <div id="child">child</div>
  </div>

＆＃13;

＆＃13;

＆＃13;