Text won't go back to line html css - Stack Overflow

admin管理员组

文章数量:1394066

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

Share Improve this question Follow edited Mar 14 at 19:04 rozsazoltan 11.2k66 gold badges2020 silver badges5959 bronze badges asked Mar 14 at 19:00 NoraNora 1111 bronze badge 0

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 3

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; 
}

本文标签： Text won39t go back to line html cssStack Overflow