使文本仅在div内时可见

Question

我试图使文本仅在div内时对用户可见，而在div之外时必须隐藏。

文本从左到右是动画的，因此它不是固定的。

很难解释，所以我做了一张图片，以使您更好地理解：

基本上，除div和box以外的所有其他内容都应具有较高的z-index才能获得此效果，但这是不可能的，因为它可以覆盖所有内容。

有什么想法，可能使用CSS和JS或JQuery吗？

Answer 1

overflow: hidden; white-space: nowrap;将为您完成这项工作。 white-space: nowrap防止文本换行，而overflow: hidden隐藏超出div边界的所有内容。

摘要

.container {
  height: 300px;
  width: 300px;
  overflow: hidden;
  border: 1px solid black;
  white-space: nowrap;
}

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 2

只需使文本不自动换行，然后在方框overflow: hidden

.box {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  background: #efefef;
}

<div class='box'>
  <p>Wow look at this text it goes out of the box</p>
</div>

Answer 3

CSS属性overflow: hidden;将导致不呈现元素表面区域之外的所有所有内容。

div {
width: 100px;
height: 20px;
background-color: blue;
overflow: hidden;
}

<div> text will go outside this div</div>