調整頁面大小時防止子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;}