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

Question

我一直在尝试利用与此处相关的现有答案，但没有一个能够解决我的问题。

我有一个bootstrap 3图像轮播，在该轮播容器中，有固定的文本。 问题是当缩小浏览器页面时，文本在其父代之外溢出。 我已经在容器类上添加了位置：“相对”（“容器”），但是文本仍然溢出。 关于如何防止这种情况的任何建议？

CSS：

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

图像轮播：

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

Answer 1

首先，您的代码不正确，您缺少用于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;
}

Answer 2

您可以将.child-header设置为

.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;
}

Answer 3

隐藏溢出：

.child-header{overflow: hidden;}