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

Question

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

我有一个bootstrap 3图像轮播，在那个旋转木马容器内，有固定的文字。问题是当缩小浏览器页面时，文本溢出其父级。我添加了位置：＆＃39; relative＆＃39;在容器类（＆＃39;容器＆＃39;）上，但文本仍然溢出。有关如何防止这种情况的任何建议吗？

的CSS：

DD-MM-YYYY HH:SS

图片轮播：

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

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

隐藏溢出：

public void UpdateEmployee(Employee entity)
{
    var dbItem = context.EmployeeEnities.FirstOrDefault(g=>g.Id==entity.Id);

    //Context is already have track of this entity, you can just update properties you have changed.
    dbItem.Name = entity.Name;

    Context.SaveChanges()
 }