如何防止文本溢出容器？

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