Html 在调整页面大小时防止子div溢出其父容器

我一直在尝试利用现有的关于这个问题的答案，但都没有解决我的问题

我有一个bootstrap3图像旋转木马，在这个旋转木马容器中，有固定的文本。问题是，当浏览器页面收缩时，文本溢出到其父页面之外。我在容器类“container”上添加了位置：“relative”，但文本仍然溢出。有没有关于如何防止这种情况的建议

css:

图像传送带：

<div class="container">
    <div id="hero-slider" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#hero-slider" data-slide-to="0" class="active"></li>
          <li data-target="#hero-slider" data-slide-to="1"></li>
          <li data-target="#hero-slider" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img class="hero-image" src="/assets/1.jpg">
          </div>
          <div class="item">
            <img class="hero-image" src="/assets/2.jpg">
          </div>
          <div class="item">
            <img class="hero-image" src="/assets/3.jpg">
          </div>
        </div>
    </div>
    <div class="child-header">
        <h1><i>Heading 1</i></h1>
        <h3>Some description here</h3>
    </div>
</div>

隐藏溢出：

.child-header{overflow: hidden;}

---

首先，您的代码不正确，top和transform缺少分号，而且}后面有一个分号，这是不正确的。将绝对位置添加到收割台，以相对于相对容器进行绝对定位

.container {
  position: relative;
}
.child-header {
  z-index: 2;
  width: 60%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

您可以将.child标题设置为

或

---

问题是关于防止溢出，而不是隐藏它感谢编辑建议，在这里粘贴代码时分号被忽略了。至于给孩子添加“绝对”位置的解决方案，它不起作用。缩小窗口时，它仍然会溢出父容器。根据实际代码，它将始终溢出父容器，因为您选择的字体大小。如果它太大，就会溢出。根据图像的不同，您可以尝试拉伸内容以适应标题，但您必须稍微重新构建它才能使用flex Box。

.container {
  position: relative;
}
.child-header {
  z-index: 2;
  width: 60%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.child-header {
    z-index: 2;
    width: 60%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: contents;
}

.child-header {
    z-index: 2;
    width: 60%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline;
}