如何防止文本溢出容器？

Question

我正在創建一個頁面的最小高度為200vh 。 我有一個完整的頁面圖像，其后是文本內容。 我想防止文本溢出容器。 這是一個例子：

 * { margin: 0; padding: 0; } .container { position: absolute; width: 100%; min-height: 200vh; background: red; } .full-page-image { background-image: url("https://i.ytimg.com/vi/xC5n8f0fTeE/maxresdefault.jpg"); background-size: cover; position: absolute; height: 100vh; width: 100%; } .content { position: relative; top: 100vh; left: 10vw; width: 80vw; } .content p { font-size: 1.4em; } 

 <div class="container"> <div class="full-page-image"> </div> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum leo at hendrerit pulvinar. Integer non lacus dapibus, dictum ipsum sed, gravida erat. Quisque fermentum fermentum arcu, ac sollicitudin est. Mauris nec pulvinar mi, eu eleifend nisi. Cras lorem ligula, condimentum eget dictum quis, dapibus et est. Quisque tincidunt libero sit amet odio tincidunt, quis bibendum neque malesuada. Proin elementum nulla diam, ac porta est sodales at. Cras ac tortor in odio scelerisque scelerisque. Vestibulum eu ligula semper, lacinia purus ac, auctor orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum aliquam nisi ligula, scelerisque imperdiet ante consequat ut. Proin est dolor, egestas a sapien vitae, ultricies euismod ex. Nam eget euismod ante. Praesent finibus sed nisi tincidunt pretium. Vestibulum porta laoreet sapien, et congue odio posuere eu. Proin nec lectus vel libero vestibulum tincidunt. In dapibus a nisl eu imperdiet. Donec faucibus odio a metus sagittis, et vulputate dui dapibus. Etiam non ex libero. Duis ultricies dignissim nulla, in mollis sem condimentum vitae. Etiam tincidunt sed dolor vitae venenatis. Maecenas volutpat felis eu vehicula pharetra. Donec a turpis lacus. Aenean tortor justo, iaculis ut erat eu, rhoncus sagittis elit. Nullam non sapien purus. In at consectetur augue, sit amet mollis justo. Suspendisse feugiat quam vitae massa tempor luctus. Duis aliquam commodo dolor et commodo. Aenean sit amet nisl vitae quam tincidunt molestie id ac enim. Fusce eu ante imperdiet, viverra lacus at, efficitur risus. Vestibulum placerat, libero quis luctus faucibus, diam nisl tempor justo, eu tempus mauris ligula in libero. Pellentesque ut odio quis orci interdum gravida vitae ut neque. In hac habitasse platea dictumst. Ut finibus mi vitae enim euismod auctor. Integer libero dui, laoreet vel euismod vitae, eleifend mattis urna. Praesent convallis sodales elit, vel elementum purus dapibus nec. Curabitur euismod ullamcorper dolor, a egestas nibh porttitor rhoncus. Nam elementum bibendum elementum. Fusce non nibh quis odio tempor lobortis ut et lorem. Quisque volutpat dapibus mauris, vitae varius ipsum sollicitudin malesuada. Etiam ultricies sapien tortor, et vehicula ipsum volutpat sollicitudin. Nulla id nisl nunc. Sed sit amet iaculis lacus. Nulla egestas ex purus, eget elementum nibh molestie et. Vivamus sodales rhoncus varius. Donec malesuada, quam et pharetra aliquet, odio erat gravida nunc, nec vehicula tellus diam in purus. Curabitur feugiat tempor nulla, euismod ornare lorem consequat at. Nam rutrum arcu porta nulla convallis viverra. Mauris pharetra velit arcu, ac placerat quam ornare ut. Morbi vitae diam quis turpis fringilla ornare at in urna. Nulla elit lectus, molestie sit amet risus nec, pretium vehicula diam. Morbi velit massa, accumsan eget iaculis eget, pharetra at ex. Duis purus eros, iaculis nec enim at, dignissim pellentesque purus. Nulla convallis, erat quis elementum posuere, metus libero malesuada erat, eu pharetra mauris libero id lacus. Curabitur placerat accumsan hendrerit. Proin vel mauris eget justo fringilla volutpat eget a libero. Nullam iaculis varius fringilla. Morbi in urna mi. Pellentesque sit amet lacinia odio. Nunc vel dolor aliquet, vulputate magna non, consequat purus. Mauris non malesuada est, nec congue ante. Sed sit amet vestibulum nunc, id hendrerit urna. Ut porta eget risus a tincidunt. Aliquam ut dui elit. Nulla quis varius sapien, vulputate auctor mi. Phasellus rhoncus vestibulum purus, vestibulum porttitor libero mattis in. Aenean elit velit, ultrices in lacinia et, lobortis id tortor. Quisque dapibus cursus lorem, et consequat tellus pretium eu. Maecenas vitae magna bibendum mi placerat pellentesque. </p> </div> </div> 

如何防止文字超出紅色背景？

Answer 1

您可以通過以下方法防止文本溢出容器：1.擴展容器以適合文本，或2.將溢出的文本隱藏在容器之外。

1：
一種。 在您的情況下，使用top: 100vh不會更改元素的高度，但是會將整個元素向下推100vh。 因此，它將使父/容器元素（紅色背景）溢出100vh。 此元素內的文本將到達底部，也將溢出100vh。 請使用margin-top: 100vh ，以使元素從頂部開始100vh，但在其父元素內結束。

2：
一種。 確保容器達到所需的高度。 使用開發工具查看/突出顯示元素的高度。
灣 設置overflow: scroll; 或overflow: hidden; 請參見css溢出。這將使用或不使用滾動條隱藏超出容器高度的文本。 注意： overflow: auto如果沒有溢出，則overflow: auto將（不應）不顯示滾動條。

Answer 2

完全確定您要尋找的是：

.container {
  position: absolute;
  width: 100%;
  min-height: 200vh;
  overflow-y: auto;
  background: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow