-1

The div element which the text is written for is bounded, but the text still extends the boundaries instead of going to the next line. How do I prevent this by not manually inserting <br>s?

Codepen 

document.getElementById('commentContent').innerHTML = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
.div-modal{
  width: 100%;
  height: 100%;
  /* size: 10rem; */
  overflow: hidden; /* anything in it will not surpass this div's dimensions */ 
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed; /* to make it relative to the browser window*/
  top: 0; 
  display: flex;
  /* display: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  justify-content: center;
  align-items: center;

  filter: blur(0px);
}

.div-content{
  background-color: #f4f4f4;
  width: 600px;
  height: 550px; 
  border-radius: 6px;
  text-align: center;
  padding: 18px;
  padding-top: 13px;
  margin-top: 0px;
  position: absolute; /* controlling the position of it with top/left/right/bottom to make it fit*/
  top: 30px; 
}

#commentContent{
  margin: 30px;
  margin-top: 50px;
  margin-right: 50px;
  height: 300px;
  justify-content: center;
  align-items: center;
}
<div class="div-modal" id="commentModal"> 
  <div class="div-content">
    <span class="closeBtn" id="closeBtnComment">&times;</span>
    <p id="comments"></p>
    <div id="commentContent">
    </div>
  </div>
</div>
Azametzin
  • 5,223
  • 12
  • 28
  • 46
David
  • 159
  • 1
  • 14
  • Just use real text, i.e. real words - they are seperated by spaces, and those will cause line-breaks – Johannes Mar 09 '20 at 18:01

2 Answers2

4

Consider using spaces, or use word-wrap:break-word

document.getElementById('commentContent').innerHTML = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
.div-modal{
  width: 100%;
  height: 100%;
  /* size: 10rem; */
  overflow: hidden; /* anything in it will not surpass this div's dimensions */ 
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed; /* to make it relative to the browser window*/
  top: 0; 
  display: flex;
  /* display: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  justify-content: center;
  align-items: center;

  filter: blur(0px);
}

.div-content{
  background-color: #f4f4f4;
  width: 600px;
  height: 550px; 
  border-radius: 6px;
  text-align: center;
  padding: 18px;
  padding-top: 13px;
  margin-top: 0px;
  position: absolute; /* controlling the position of it with top/left/right/bottom to make it fit*/
  top: 30px; 
}

#commentContent{
  margin: 30px;
  margin-top: 50px;
  margin-right: 50px;
  height: 300px;
  justify-content: center;
  align-items: center;
  word-wrap:break-word
}
<div class="div-modal" id="commentModal"> 
  <div class="div-content">
    <span class="closeBtn" id="closeBtnComment">&times;</span>
    <p id="comments"></p>
    <div id="commentContent">
    </div>
  </div>
</div>
V.Volkov
  • 731
  • 3
  • 12
1

I solved it like this:

#commentContent{
    margin: 30px;
    margin-top: 50px;
    margin-right: 50px;
    height: 300px;
    word-break: break-word;
    text-align: left;
}

Here, 'word-break' will break the long lines inside the inner div("#commentContent").

• You can use text-align: Left for aligning the inside contents, instead of using: 

justify-content: center;
align-items: center;
Partha Paul
  • 189
  • 4