div tag won't wrap text

Question

I am appending a div called chat-message into a div called card-block, however I want it to wrap the text so that it does not go out of screen. I tried using the CSS property:

var message = document.createElement('div');
message.setAttribute('class', 'chat-message');
message.innerHTML = "<preBot>" + data[x].name + ": " + data[x].message + '</preBot>';
messages.appendChild(message);
messages.insertBefore(message, messages.nextSibling);

.chat-message {
  word-break: break-all;
  width: 400px;
}

<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3 col-sm-12">
      <h1 class="text-center">
        Quick ORDR
        <button id="clear" class="btn btn-warning">Clear</button>
      </h1>
      <div id="status"></div>
      <div id="chat">
        <input type="text" id="username" name="username" class="form-control" placeholder="Enter name..." style="display:none;" wrap="soft">
        <br>
        <div class="card">
          <div id="messages" class="card-block" style="overflow:auto;">

          </div>
        </div>
        <br>
        <textarea id="textarea" name="message" class="form-control" placeholder="Enter message..."></textarea>
        <br />
        <div class="yes" style="display:none;"><button id="yes" class="btn btn-success" display="none">Correct</button> <button id="no" class="btn btn-danger">Incorrect</button> </div>
      </div>
    </div>
  </div>
</div>

The prebot tag is just for textcolor and justification and making sure there are page breaks. When I run the code, the text I enter behaves as normally, just keeps going to the right.

Anyway if you want your text to wrap to next line, all you need is a fixed width element with { white-space: normal; } — AvcS, May 30 '18 at 15:46
is being interpreted as a
element? That would cause what you describe. — user3357118, May 30 '18 at 15:50
Without seeing a working example it's hard to be certain, but It sounds like a simple case of setting a width. If the div runs off of the screen then so too will its text content — NightPorter, May 30 '18 at 16:11
messages is the div in which i am sending all of my created div called chat-message — DanielJomaa, May 30 '18 at 17:11
That's the same as your innerHTML except the strings are using an advanced syntax of template literals of which modern browsers support. The tags have no significance to this demo because it's non-standard, it is also invalid unless you can provide the plugin/code/framework that makes tag more than just a — zer00ne, Jun 01 '18 at 20:07
Your existing CSS is one ruleset to which is replaced by a similar yet better property. You claim that my code messes up yours, do you expect my code to merrily fit with yours when I haven't seen it in it's entirety? Your justification done with `
` tags is a joke. The reason why you can't wrap your text is because of the PRE tags. BTW are the `` tags acting like real `
` tags or did leave out too much of the CSS to see why you can't wrap text in a div (divs naturally wrap text so your CSS is convoluted and out of control or you are fighting the effects of a poorly chosen tag.) — zer00ne, Jun 01 '18 at 20:08

score 0 · Answer 1 · answered May 30 '18 at 16:14

0

Textarea does not accept much in the way for formatting. The only control you are given for layout are line breaks. You cannot push a DIV into a text area. A DIV is a DOM element. Texboxes only accept text - not DOM elements.

use the \n newline character to break your text into multiple lines inside a textarea.

answered May 30 '18 at 16:14

Korgrue

3,430
1
13
20

Im sorry i misspoke, i meant to say that i and appending a div into a div called messages, also this is a chatbox type of formatting so everything is dynamic – DanielJomaa May 30 '18 at 17:10

div tag won't wrap text

1 Answers1