只在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>