我可以在不移动内容的情况下移动“隐藏的溢出”框吗？

Question

我只是试图用一个盒子隐藏部分内容。

.box {
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: gray;
  overflow: hidden;
}

.contents {
  position: absolute;
  padding: 50px;
}

<div class="box">

  <div class="contents">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem blanditiis, tempora corporis est vero doloribus quos odit mollitia fugiat dolorem? Accusamus, maiores. Temporibus quidem quia dignissimos repellat inventore aperiam perspiciatis!asd</div>

</div>

我的问题： 我可以只移动盒子的位置并将内容固定在同一位置吗？

Answer 1

您必须为文本设置样式，才能实现目标，请尝试以下操作： 如果添加wrapper-div，则可以使用.wrapper设置整个对象的宽度，高度和位置。使用子div .box，您可以定义彩色背景的宽度，高度和位置（示例中为黄色），最后使用嵌套的div .contents，您可以定义文本的宽度和高度在框中。

.wrapper {
  background-color:gray;
  position:absolute;
  width:500px;
  height:300px;
}

.box{
  position:relative;
  left: 30px;
  top:30px;
  
  background-color:yellow;
  width:250px;
  height:250px;
  
  overflow:hidden;
}

.contents{
  width:50px;
  border: solid 1px red;
  word-wrap: break-word ;
}

<div class="wrapper">
  <div class="box">
    <div class="contents">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem blanditiis, tempora corporis est vero doloribus quos odit mollitia fugiat dolorem? Accusamus, maiores. Temporibus quidem quia dignissimos repellat inventore aperiam perspiciatis!asd</div>
  </div>
</div>