Question

我有一系列的div，每个都有一个标题。问题在于标题不停留在div中。 contenitore_titolo_articolo中的h1正在溢出。

.contenitore_articoli {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: 600px;
}

.articolo {
  display: inline-block;
  height: 580px;
  position: relative;
  width: 420px;
  border: 1px solid black;
  margin-right: 110px;
  border-radius: 10px;
  background: url("https://cdn.cnn.com/cnnnext/dam/assets/190625132717-01-democratic-debate-miami-0625-super-tease.jpg") no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.layer_opaco {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 10px 10px 10px 10px;
}

.contenitore_titolo_articolo {
  width: 90%;
  height: auto;
  border: 1px solid white;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  overflow-wrap: break-word;
}

.contenitore_titolo_articolo h1 {
  color: white;
  margin: 0;
  font-size: 24px;
}

<div class="contenitore_articoli">
  <div class="articolo">
    <div class="layer_opaco">
      <div class="contenitore_titolo_articolo">
        <h1>The first Democratic debate, night 2asdasdasdasd</h1>
      </div>
    </div>
  </div>
</div>

Answer 1

您有以下代码：

contenitore_articoli {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: 600px;
}

删除white-space: nowrap;，标题将正确显示

Answer 2

将white-space: normal;添加到您的h1即可解决问题。

.contenitore_titolo_articolo h1 {
    white-space: normal;
}

您的h1当前继承了white-space: nowrap;上设置的.contenitore_articoli属性。

为什么我的段落不断溢出div

2 个答案: