Html 如何防止文本溢出容器？

我正在创建一个网站，其中页面的最小高度为

200vh

。我有一张完整的图片，下面是文字内容。我想防止文本溢出容器。以下是一个例子：

*{
保证金：0；
填充：0；
}
.集装箱{
位置：绝对位置；
宽度：100%；
最低高度：200vh；
背景：红色；
}
.整页图像{
背景图像：url（“https://i.ytimg.com/vi/xC5n8f0fTeE/maxresdefault.jpg");
背景尺寸：封面；
位置：绝对位置；
高度：100vh；
宽度：100%；
}
.内容{
位置：相对位置；
顶部：100vh；
左：10vw；
宽度：80vw；
}
.内容p{
字号：1.4em；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。亨德雷特普尔维纳尔的狮子座。整数非空白，即席声明，孕妇。这是一种发酵剂。Mauris nec pulvinar mi，eu eleifend nisi。这是一种很好的调味品。自由主义者坐在奥迪奥·廷西德的位子上，而自由主义者坐在马莱苏阿达的位子上。直径为零的前元素，在。奥迪奥十字勋章中的Cras ac tortor十字勋章。前庭舌苔，紫斑紫罗兰ac，奥克托奥奇。虎口浮雕和肘部浮雕同侧前庭；
前庭不等长舌苔，节杖不利于饮食。这是一种智慧的生命，是一种特殊的生命。这是一种很好的饮料。门厅位于laoreet sapien和congue odio posuere eu。自由前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。在dapibus中，nisl是一种独特的饮食。不要让一个人马和一对母牛在一起。Etiam非前自由人。在mollis sem的vitae调味品中添加了Duis ultricies vignassim nulla。这是威尼斯人的生命。Maecenas volatip felis eu Vehiclula pharetra。不要吃火鸡。埃尼安·托托·胡斯托，艾库利斯·乌特·埃拉特·尤特，弓形菱形精英。非智人purus。在圣奥古斯都，坐着艾米特·莫利斯·胡斯托。
暂时性死亡的宿命。这是一个很好的例子。我的生命中只有一个小分子。这是一种不安全的饮食，是一种有效的饮食。前庭位置，自由之路，时间之径，自由之路。怀孕期间的日常生活。在hac habitasse Plateum，一句名言。这是我生命的最后一刻。整数自由酒后驾车，劳里特·韦勒·尤伊斯莫·维塔，埃利芬德·马蒂斯·乌纳。这是一种精髓的营养素，是一种新的营养素。尤伊斯莫·乌拉姆科珀·多洛（Curabitur euismod ullamcorper dolor）是一位名叫尼布·波特提托·朗库斯（egestas nibh porttitor rhoncus）的牧师。Nam elementum bibendum elementum。
不受时间和知识的限制。毛里斯之父，我的生命之父。乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐斯乌尔齐。无标识nisl nunc。塞德·阿梅特·亚库利斯·拉库斯。purus前的植物，植物元素nibh molestie和Vivamus sodales rhoncus varius。Donec malesuada，quam et pharetra aliquet，odio erat gradia nunc，nec Vehicle tellus diam in purus。临时牧师，尤伊斯莫·奥纳雷·洛雷姆·康塞卡特。Nam rutrum arcu porta nulla convallis viverra。毛里斯·法雷特拉·维利特·阿库（Mauris pharetra velit arcu），位于奥纳河沿岸。乌尔纳的莫尔比·维塔·迪亚姆·奎斯·弗林斯·奥纳雷。无精细胞，无核细胞，无核细胞，无核细胞，无核细胞，无核细胞，无核细胞，无核细胞，无核细胞，无核细胞，无核细胞，无核细胞，无核细胞，无核细胞，无核细胞，无核细胞，无核细胞，无核细胞。Morbi velit massa、accumsan eget iaculis eget、pharetra at ex.Duis purus eros、iaculis nec enim at、Dignessim Pelletsque purus。这是一个令人难以置信的事实，是一个基本要素，是一个自由主义者，是一个自由主义者。
亨德雷特酒店。他是一个自由人。花斑夜蛾。米尔纳的莫尔比。佩伦茨克坐在阿梅特·拉西尼亚·奥迪奥旁边。这是一个很好的例子。Mauris non malesuada est，nec congue ante。我坐在前庭，我是亨德雷特·乌尔纳。我们的门是一个小灯。一对一的精英。这是一种智者的变种，是一种行尸走肉。斜角前庭purus，前庭porttitor libero mattis in。埃涅阿斯精英维利特，拉齐尼亚和洛博蒂斯的特丽斯。这是一个很好的例子。这是一个非常好的例子。

非常确定这就是您想要的：

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

---

您可以通过以下两种方法之一防止文本溢出容器。展开容器以适合文本，或2。将溢出的文本隐藏在容器之外

1:
A.在您的情况下，使用

top:100vh

不会改变元件的高度，但会将整个元件向下推100vh。因此，它将使父/容器元素（红色背景）溢出100vh。该元素中的文本将到达底部，也会溢出100vh。改为使用

边距顶部：100vh

，让元素从顶部开始100vh，但在其父元素内结束

2:
A.确保容器达到所需高度。使用开发工具查看/突出显示元素的高度。

---

B设置

溢出：滚动或
溢出：隐藏查看这将隐藏超出容器高度的文本，无论是否使用滚动条。注意：
overflow:auto
如果没有溢出，将（应该）不显示滚动条。
您希望文本的红色区域扩大，还是将文本隐藏在红色区域之外？我建议在文本上使用
overflow:hidden
或
overflow:scroll
，但这仅在父元素未超出红色区域时有效。使用.content上的
页边距顶部：100vh
而不是
页边距顶部：100vh
，以正确展开该页边距