1

I have this HTML page using div boxes with text being added into it, and long strings without no spaces like aaaaa spam causes the text to run off the DIV, and doesn't even contain it.

I don't want overflow: scroll where the div just turns into a box where you scroll, I want it so it goes to the next line.

I tried multiple solutions involving properties with the word wrap or overflow and break-word but that didn't work.

It's got to be a DIV element I'm using, I have to put in different types of colored text and <textarea> won't let me do that. It just regards the elements I add in as a string and nothing like HTML.

That oninput code just adjusts the div box when you enter a lot of words.

So;

  • I want to make innerHTML elements with text to wrap in a div box
  • It has to be a div element
  • Must wrap, not scroll.

My current code:

  • When you have a spaceless, long word: just goes off the screen.
  • Works with sentences like "The fox jumped over the lazy brown dog"

I have a feeling this is a CSS issue, but I'll just say the language I use is Javascript, just in case.

.myClass {
  height: 30vh;
  width: 80%;
  padding: 10px;
  font-size: 14px;
  text-align: left;
  resize: none;
  margin: auto;
  background-color: gray;
}

div,
span {
  white-space: pre;
  overflow-wrap: break-word;
  word-wrap: break-word;
  display: inline-flex;
}
<div class="myClass" readonly="true" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'>
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
Meh.
  • 234
  • 2
  • 12
  • I made you a snippet. What is the purpose of the oninput? Unless the div is contenteditable, it has no input. And what is the point of making it contenteditable and then readonly? Please change the snippet to a [mcve] Perhaps have a look here too: https://stackoverflow.com/questions/30273377/div-contenteditable-but-readonly – mplungjan Feb 20 '21 at 06:36

1 Answers1

2

Try this. The style white-space: pre; is preventing non-spaced words from breaking so I took that out, and added word-break: break-all; to break on all characters not just spaces.

.myClass {
  height: 30vh;
  width: 80%;
  padding: 10px;
  font-size: 14px;
  text-align: left;
  resize: none;
  margin: auto;
  background-color: lightblue;    /* added for example */
}

div,
span {
/*   white-space: pre; */         /* removed */
  overflow-wrap: break-all;
/*  word-wrap: break-word; */     /* removed */
  word-break: break-all;          /* added */
  display: inline-flex;
}
<div class="myClass" readonly="true" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'>QWERTYUIOPASDFGHJKLLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASD
</div>
CodeNinja
  • 616
  • 4
  • 18