CODEWITHSUNDEEP
htmlcss
Adam Taoufiq
Adam Taoufiq

Reputation: 49

Why does my paragraph keep overflowing out of div

I have a series of divs and in each one, I have a title. The problem is the title doesn't stay inside the div. the h1 in the contenitore_titolo_articolo is the one overflowing.

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

Upvotes: 0

Views: 97

Answers (2)

mmshr
mmshr

Reputation: 947

Adding white-space: normal; to your h1 will do the trick.

.contenitore_titolo_articolo h1 {
    white-space: normal;
}

Your h1 is currently inheriting the white-space: nowrap; property set on .contenitore_articoli.

Upvotes: 0

crazymatt
crazymatt

Reputation: 3286

You have this code:

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

remove the white-space: nowrap; and your title will show correctly

Upvotes: 2

Related Questions