使文本仅在 div 内可见答案

【问题标题】：Make a text visible only when inside a div使文本仅在 div 内可见
【发布时间】：2023-03-10 09:15:01
【问题描述】：

我试图让用户仅在 div 内看到文本，而在 div 外必须隐藏它。

文字是从左到右的动画，所以不是固定的。

这很难解释，所以我做了一个图片让你更好地理解：

基本上除了 div 和 box 之外的所有东西都应该有更高的 z-index 才能获得这种效果，但这是不可能的，因为它会覆盖所有东西。

任何想法，可能使用 CSS 和 JS 或 JQuery？

【问题讨论】：

css : div{overflow:hidden}?请提供minimal reproducible example
非常感谢，这解决了我的问题！对不起，如果这是一个愚蠢的问题
如果想让隐藏的文字滚动，可以改用overflow: auto

标签： javascript jquery html css

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

CSS 属性overflow: hidden; 将导致元素表面区域之外的一切不被渲染。

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

&lt;div&gt; text will go outside this div&lt;/div&gt;

【讨论】：