I want my text to go back to line when it goes outside the box but just can't find how to.

Right now it goes back to line only when it would be outside the screen, not the box I want to put it in.

I know it's a lot of CSS for what I'm trying to do, but I'm trying to show what I've done until now.

h6 {
  color: #89CFF0;
  font-size: x-large;
  text-align: center;
  margin-top: 100px;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: white;
  border: 5px solid white;
  border-radius: 10px;
  box-sizing: content-box;
  overflow-wrap: normal;
  width: 80vw;
}

.h6Box {
  width: 80vw;
  overflow: hide; 
  position: block; 
  margin: 0 auto;
  box-sizing: content-box;
  overflow-wrap: normal;
}

<div class="h6Box">
  <h6 style="text-align: left; padding-left: 2vw;">
    text here
  </h6>
</div>

<div class="h6Box">
  <h6 style="text-align: left; padding-left: 2vw;">
    text here
  </h6>
</div> 

I want my text to go back to line when it goes outside the box but just can't find how to.

Right now it goes back to line only when it would be outside the screen, not the box I want to put it in.

I know it's a lot of CSS for what I'm trying to do, but I'm trying to show what I've done until now.

h6 {
  color: #89CFF0;
  font-size: x-large;
  text-align: center;
  margin-top: 100px;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: white;
  border: 5px solid white;
  border-radius: 10px;
  box-sizing: content-box;
  overflow-wrap: normal;
  width: 80vw;
}

.h6Box {
  width: 80vw;
  overflow: hide; 
  position: block; 
  margin: 0 auto;
  box-sizing: content-box;
  overflow-wrap: normal;
}

<div class="h6Box">
  <h6 style="text-align: left; padding-left: 2vw;">
    text here
  </h6>
</div>

<div class="h6Box">
  <h6 style="text-align: left; padding-left: 2vw;">
    text here
  </h6>
</div> 

• html
• css

2 Answers 2

overflow-wrap: normal; does not force line breaks. Instead, you should use overflow-wrap: break-word;.

• overflow-wrap CSS property - MDN Docs

Note: I simplified the example a bit. I added a background color so you can see when a word is too long and overflows the div, and when it breaks properly.

p {
  display: inline-block;
  margin: 0 3rem;
  width: 100px;  
  background-color: black;
  color: #89CFF0;
  word-wrap: break-word;  
  overflow-wrap: break-word;  
}

p.original {
  overflow-wrap: normal; 
}

p.new {
  overflow-wrap: break-word;  /* working */
}

<p class="original">
  Most words are short & don't need to break. But Antidisestablishmentarianism is long. The width is set to min-content, with a max-width of 11em.
</p>

<p class="new">
  Most words are short & don't need to break. But Antidisestablishmentarianism is long. The width is set to min-content, with a max-width of 11em.
</p>

.text-container {
    word-wrap: break-word;     
    overflow-wrap: break-word; 
}