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

【问题标题】：Prevent child div from overflowing its parent container when resizing the page调整页面大小时防止子 div 溢出其父容器
【发布时间】：2018-11-12 18:45:19
【问题描述】：

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

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

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>

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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;
}

【讨论】：

感谢您的编辑建议，在此处粘贴代码时忽略了分号。至于为孩子添加“绝对”位置的解决方案，它不起作用。缩小窗口时还是会溢出父容器
根据您的真实代码，它总是会这样做，因为您选择了字体大小。如果它太大，它会溢出。根据图像，您可以尝试拉伸内容以适合标题，但您必须重新构建它以使用 flex-boxes。

【解决方案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;
}

【讨论】：

【解决方案3】：

隐藏溢出：

.child-header{overflow: hidden;}

【讨论】：

问题是关于防止溢出，而不是隐藏它